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内 容 简 介 


HTML 语言 是 制作 网 页 的 基础 语言 。 作 为 一 个 网 页 制作 爱好 者 或 者 专业 的 网 页 设计 师 ，HTML 语言 知识 是 不 可 或 
缺 的 。 本 书 由 最 基本 的 HTML 语法 开始 讲解 网 页 设计 的 基础 技术 ， 详 细 介绍 了 各 种 网 页 制作 的 标记 ; 然后 介绍 如 何 运 
用 CSS 控制 网 页 画面 中 文字 与 图 片 的 样式 ， 接 下 来 讲解 了 JavaScript 语言 与 网 页 特效 的 制作 ， 最 后 以 应 用 最 广泛 的 
Dreamweaver 为 例 ， 介 绍 网 页 设计 的 方法 。 在 讲解 中 配 有 大 量 范例 ， 使 读者 在 实际 操作 中 学 习 制 作 网 页 。 

本 书 适合 作为 各 类 网 页 设计 制作 培训 学 校 的 教材 ， 也 可 供 想 要 把 网 页 做 得 更 好 的 广大 普通 网 页 制作 爱好 者 学 习 ， 
以 及 从 事 网 站 建设 和 网 页 设计 制作 的 专业 人 士 分 析 借鉴 。 
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编辑 寄语 


“不 积 趾 步 ， 无 以 至 千里 ” 
一 一 中 国 思 想 家 前 子 


2006 年 1 月 ， 北 京 图 书 订货 会 ， 在 清华 大 学 出 版 社 的 展位 上 ， 众 多 发 行商 和 书店 经 营 人 对 刚 出 版 
的 一 套 计 算 机 图 书 表示 了 极 大 的 关注 。 这 套 书 就 是 “网 站 开发 非常 之 旅 ”。 在 琳琅 满目 的 计算 机 图 书 
中 ， 这 套 书 缘何 有 这 样 的 “魔力 ” 呢 ? 在 和 他 们 的 交流 中 我 了 解 到 ， 当 前 网 络 类 图 书 的 热卖 和 我 们 这 
套 书 的 精品 感觉 是 他 们 看 好 这 套 书 的 主要 原因 。 

时 隔 半年 之 久 ， 再 看 看 这 套 书 ， 还 真 没 有 辜负 众人 的 期 望 。 在 短 短 的 半年 内 这 套 书 已 多 次 印刷 ， 
销售 居 同 类 图 书 前 列 。 对 于 计算 机 图 书 ， 这 是 一 个 让 人 欣 奈 的 结果 。 

当然 ， 好 卖 的 书 未 必 一 定 就 是 好 书 。 这 得 由 读者 说 了 算 。 根 据 半年 以 来 读者 的 反馈 可 以 看 出 ， 他 
们 比较 一 致 地 认为 这 套 书 定位 明确 ， 内 容 有 特色 ， 编 写 质量 较 好 ， 看 后 能 学 到 真正 有 用 的 东西 。 我 们 
从 中 不 难看 出 这 套 书 受 欢迎 的 一 些 原因 。 

为 了 让 读者 更 加 全 面 地 了 解 这 套 书 ， 下 面具 体 介 绍 这 套 书 的 定位 、 内 容 、 特 色 、 读 者 对 象 等 。 


丛书 定位 


根据 读者 的 实际 需求 ， 本 丛书 并 不 追求 面面俱到 ， 而 是 定位 于 实用 ， 并 注重 对 基本 知识 点 的 掌握 
和 对 基本 技能 的 提升 。 突 出 体现 在 以 下 儿 点 : 
回 ”每 本 书 大 体 都 对 应 着 相应 的 工作 岗位 ， 着 重 让 读者 掌握 一 项 技能 ， 使 他 们 在 学 完 一 本 书 以 后 ， 
可 以 将 所 学 应 用 到 实际 工作 中 去 。 
回 讲解 概念 ， 但 并 不 拘泥 于 概念 ， 而 是 侧重 于 对 概念 的 灵活 运用 ， 从 而 让 读者 在 实践 中 加 深 对 
概念 的 理解 和 对 基本 知识 的 掌握 。 
回 ”不 安排 纯 演 示 性 实例 ， 那 种 实例 通常 没有 任何 应 用 价值 ， 读 者 很 难 通 过 它 而 达到 较 好 的 应 用 
水 平 。 本 丛书 中 的 实例 大 多 选 自 于 实际 开发 ， 是 对 作者 多 年 开发 经 验 的 总 结 。 读 者 通过 对 这 
些 实例 的 研读 ， 可 以 真正 体验 实际 的 开发 过 程 ， 从 而 将 所 学 应 用 于 实践 。 


丛书 书目 
第 一 批 〈 已 出 版 ) : 


《ASP 网 络 编程 从 入 门 到 精通 》 《ASP.NET 网 络 数据 库 开 发 实例 精 解 》 
《ASP+SQL Server 典型 网 站 建设 案例 》 《服务 器 配置 全 攻略 》 


下。 HTML 网 页 设计 参考 手册 


第 二 批 2006 年 9 月 出 版 ) : 


《ASP.NET 2.0 网 络 编程 从 入 门 到 精通 》 《Dreamweaver 网 页 制作 与 色彩 搭配 全 攻略 》 
《ASP.NET 2.0+SQL Server 网 络 应 用 系统 开 《JavaScript 网 页 特效 实例 大 全 》 
发 案例 精 解 》 《HTML 网 页 设计 参考 手册 》 
后 续 出 版 计划 《〈 书 名 暂 定 ) : 
《PHP 网 络 编程 从 入 门 到 精通 》 《Dreamweaver 网 页 制作 完全 手册 》 
《PHP+MySQL 典型 网 站 建设 案例 精 解 》 《网 页 设计 的 艺术 》 


《JSP 网 络 编程 从 入 门 到 精通 》 
丛书 特色 


本 从 书 按照 网 站 开发 的 流程 组 织 内 容 ， 从 最 初 的 服务 器 配置 ， 到 后 台 编 码 的 实现 ， 到 前 台 网 
页 设计 等 内 容 均 有 涉及 ， 真 正 实现 了 网 站 开发 一 条 龙 。 学 完 本 丛书， 读者 可 以 全 面 掌握 网 站 
开发 的 各 项 技术 。 

作者 均 为 有 丰富 的 网 络 编程 经 验 的 一 线 开 发 人 员 ， 可 以 确保 技术 的 先进 性 、 实 用 性 和 深入 性 。 

内 容 讲解 到 位 ， 避 免 宝 洞 ， 每 个 知识 点 都 配 有 实例 ， 读 者 可 以 上 机 操作 ， 体 会 其 中 的 奥妙 。 

贯穿 丰富 的 应 用 实例 ， 并 专门 设计 了 综合 案例 ， 让 读者 真正 做 到 学 以 致 用 ， 并 领会 项 目 开发 

配 视频 讲解 光盘 ， 将 一 些 简单 的 、 操 作 性 强 的 内 容 放 到 光盘 中 ， 以 加 速 读者 的 学 习 ， 并 节省 
篇 幅 ， 降 低 定价 ， 让 读者 真正 得 到 实惠 。 

提供 必要 的 售后 服务 。 从 书 的 每 本 书 都 有 相应 的 技术 论坛 与 作者 E-mail ( 见 前 言 ) ， 读 者 若 
有 疑问 ， 可 以 按 此 寻求 帮助 。 


读者 对 象 
回 “网 站 建设 及 网 络 开发 人 员 回 “网 页 制作 爱好 者 
回 ”网 页 设计 及 制作 人 员 回 ” 大 中 专 院 校 的 学 生 
回 “网 站 维护 人 员 加 “毕业 设计 的 学 


“不 积 哇 步 ， 无 以 至 千里 ”。 我 想 这 句 话 可 能 最 能 概括 这 套 书 成 功 的 真正 原因 。 这 套 书 要 想 走 得 
远 ， 就 得 一 步 一 个 脚印 地 做 好 各 个 环节 的 工作 。 从 对 读者 需求 的 调研 ， 到 确立 写作 思路 ， 到 选择 作者 ， 
到 后 期 编辑 及 制作 ， 乃 至 技术 服务 等 ， 都 得 一 一 落实 。 只 有 这 样 ， 才 能 给 这 套 书 的 继续 发 展 葛 定 基础 ， 
才能 让 这 套 书 继续 成 为 广大 读者 的 良师益友 。 

在 “网 站 开发 非常 之 旅 ”第 二 批 图 书 即将 出 版 之 时 ， 作 为 这 套 书 的 编辑 ， 自 是 有 感 而 发 ， 希 望 这 
套 书 能 一 如 既往 地 以 高 质量 、 高 品质 和 读者 见面 ， 同 时 也 希望 这 套 书 能 继续 受到 读者 的 关注 和 青睐 。 


本 书 编辑 
2006 年 9 月 于 清华 园 


一 人 


着 


了 路 


随 着 Internet 的 迅速 发 展 ， 网 页 设计 技术 已 成 为 学 习 计算 机 的 重要 内 容 之 一 。 目 前 大 部 分 制作 网 页 
的 方式 都 是 运用 网 页 设计 软件 ， 这 些 软件 的 功能 相当 强大 ， 使 用 非常 方便 。 不 论 是 哪 一 种 网 页 设计 软 
件 ， 最 后 都 是 将 所 设计 的 网 页 转化 为 HTML、CSS、JavaScript、VBScript 或 者 ASP。 所 以 说 ， 虽 然 有 
这 些 网 页 设计 软件 帮助 我 们 设计 网 页 ， 但 是 一 个 专业 网 页 设计 者 仍 需 了 解 HTML、CSS、JavaScript、 
VBScript 及 ASP 等 网 页 设计 语言 和 技术 的 使 用 ， 这 样 才能 充分 发 挥 自己 丰富 的 想象 力 ， 更 加 随心 所 欲 
地 设计 网 页 ， 以 实现 网 页 设计 软件 不 能 实现 的 许多 重要 功能 。 

上 面 介绍 的 几 种 网 页 设计 语言 中 ，VBScript 和 ASP 注重 编程 技巧 ， 涉 及 的 知识 很 多 ， 本 书 不 作 讲 
解 。 本 书 集中 讲解 HTML、CSS、JavaScript 这 3 种 语言 的 语法 要 素 ， 几 乎 涉及 了 它们 的 所 有 内 容 ， 读 
者 可 以 把 它 作为 参考 手册 ， 放 在 案头 随时 查阅 。 

本 书 以 最 新 的 HTML 4 为 基础 ， 系 统 介绍 了 文字 、 链 接 、 列 表 、 表 格 、 表 单 、 图 像 、 多 媒体 、 多 
窗口 等 方面 的 元 素 和 属性 。 

在 CSS 部 分 ， 本 书 完整 地 介绍 了 CSS 的 设计 思想 和 关键 概念 ， 特 别 对 CSS 的 各 种 属性 和 属性 值 
进行 了 详细 的 解释 和 分 析 。 

在 JavaScript 部 分 , 主要 介绍 了 JavaScript 脚本 语言 的 主要 特征 和 基本 功能 , 讲解 了 编写 JavaScript 
脚本 的 规则 以 及 如 何在 HTML 文档 中 嵌入 JavaScript 脚本 语言 等 内 容 ， 同 时 在 最 后 还 给 出 了 常用 的 脚 
本 范例 ， 供 读者 学 习 。 

考虑 到 实际 设计 网 页 时 大 部 分 用 户 都 是 使 用 Dreamweaver 作为 设计 工具 ， 而 不 是 手工 编写 脚本 ， 
所 以 本 书 在 开始 处 给 出 了 Dreamweaver 的 基本 用 法 ， 在 最 后 一 章 向 读者 展示 了 如 何在 Dreamweaver 中 
实现 前 面 讲解 的 大 部 分 功能 ， 让 读者 对 网 页 设计 有 一 个 整体 的 认识 。 

本 书 的 特点 : 

口 内 容 全 面 ， 讼 括 了 HTML、JavaScript、CSS 各 方面 的 内 容 ， 适 合作 为 案头 手册 随时 查 用 。 

口 真正 做 到 了 不 讲 则 已 , 一 讲 必 通 ,在 讲解 各 个 标记 和 属性 时 ,全 部 配 有 实例 和 执行 效果 ， 让 读 

者 领会 其 用 法 。 

口 针对 当前 网 页 设计 的 实际 情况 ， 配 合 Dreamweaver 进行 讲解 。 

本 书 具 有 较 强 的 可 操作 性 与 实用 性 ， 既 适用 于 从 事 网 页 设计 、 制 作 的 专业 人 士 学 习 HTML、 
JavaScript 语言 和 CSS 技术 ， 又 可 作为 广大 网 友 学 习 网 页 制作 的 入 门 教材 。 

本 书 由 张 金霞 组 织 编著 ， 其 他 参与 编写 、 资 料 整理 和 程序 调试 的 人 员 有 王 俊 标 、 陈 晨 、 李 卓 龙 、 
高 守 传 、 郭 瑞 、 周 宇 炜 、 莹 雪 奉 、 陈 杰 、 荣 飞 、 郑 林 、 张 路 平 、 贰 宇 峰 、 罗 目 菌 、 赵 正 坤 、 公 芳 亮 、 
程 明 雷 、 梁 文 建 、 马 斗 、 邱 哲 、 宋 昕 、 陈 刚 等 。 在 此 对 大 家 的 辛勤 工作 表示 衷心 的 感谢 ! 

本 书 的 专 有 论坛 : http:/www.douban.com/group/19074/。 作 者 的 E-mail: martt0656@163.com。 


编著 者 
2006 年 9 月 
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网 页 制作 技术 日 新 月 异 ， 但 都 是 以 HTML 为 基础 的 。HTML 是 浏览 器 识别 
网 页 的 标记 语言 ， 可 以 说 ， 没 有 它 就 没有 丰富 多 彩 的 网 页 。 本 章 首 先 让 读者 对 
HTML 有 一 个 初步 的 认识 ， 了 解 其 概念 、 发 展 历史 以 及 编写 方法 。 
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1.1 HTML 的 基本 概念 


1.1.1 HTML 简介 


HTML 的 英文 全 称 是 Hyper Text Markup Language， 直 译 为 超 文 本 标记 语言 。 它 是 全 球 广域网 上 描 
述 网 页 内 容 和 外 观 的 标准 。HTML 包含 了 一 对 打开 和 关闭 的 标记 ， 在 当中 包含 有 属性 和 值 。 标 记 描述 
了 每 个 在 网 页 上 的 组 件 ， 例 如 文本 段落 、 表 格 或 图 像 等 。 

事实 上 ，HTML 是 一 种 因特网 上 较 常 见 的 网 页 制作 标注 性 语言 ， 而 并 不 能 算 做 一 种 程序 设计 语言 ， 
因为 它 缺 少 程序 设计 语言 所 应 有 的 特征 。HTML 通过 IE 等 浏览 器 的 翻译 ， 将 网 页 中 所 要 呈现 的 内 容 、 
排版 展现 在 用 户 眼 前 。 


1.1.2 HTML 的 结构 概念 
一 个 完整 的 HTML 文件 包括 标题 、 段 沙 、 列 表 、 表 格 以 及 各 种 嵌入 对 象 ， 这 些 对 象 统称 为 HTML 


元 素 。 在 HTML 中 使 用 标签 来 分 割 并 描述 这 些 元 素 。 实 际 上 可 以 说 ，HTML 文件 就 是 由 各 种 HTML 
元 素 和 标签 组 成 的 。 一 个 HTML 文件 的 基本 结构 如 下 : 


<html> 文件 开始 标记 
<head> 文件 头 开 始 的 标记 
文件 头 的 内 容 


</head> 文件 头 结束 的 标记 

<body> 文件 主体 开始 的 标记 

a 文件 主体 的 内 容 

</body> 文件 主体 结束 的 标记 

</html> 文件 结束 标记 

从 上 面 的 代码 结构 可 以 看 出 ,在 HTML 文件 中 ,所 有 的 标记 都 是 相对 应 的 ， 开头 标记 为 < >， 结束 
标记 为 </>， 在 这 两 个 标记 中 间 添 加 内 容 。 

有 了 标记 作为 文件 的 主干 后 ，HTML 文件 中 便 可 添加 属性 、 数 值 、 嵌 套 结构 等 各 种 类 型 的 内 容 了 。 


1.1.3 HTML 的 标记 


既然 HTML 是 超 文 本 标记 语言 ， 那 么 可 以 想象 其 构成 主要 是 通过 各 种 标记 来 标示 和 排列 各 对 象 ， 
通常 由 尖 插 号 “<”、“>” 以 及 其 中 所 包容 的 标记 元 素 组 成 。 例 如 ，<head> 与 <head> 就 是 一 对 标记 ， 
称 为 文件 的 头 部 标记 ， 用 来 记录 文档 的 相关 信息 。 

在 HTML 中 ， 所 有 的 标记 都 是 成 对 出 现 的 ， 而 结束 标记 总 是 在 开始 标记 前 增加 一 个 “/”。 标 记 与 
标记 之 间 还 可 以 嵌 套 , 也 可 以 放置 各 种 属性 。 此 外 在 源 文件 中 , 标记 是 不 区 分 大 小 写 的 , 因此 在 HTML 
源 程序 中 ，<Head> 与 <HEAD> 的 写法 都 是 正确 的 ， 而 且 其 含义 是 相同 的 。 

HTML 定义 了 3 种 标记 用 于 描述 页 面 的 整体 结构 。 页 面 结构 标记 不 影响 页 面 的 显示 效果 ， 它 们 是 
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帮助 HTML 工具 对 HTML 文件 进行 解释 和 过 滤 的 。 

口 “<html> 标 记 : HTML 文 档 的 第 1 个 标记 ， 它 通知 客户 端 该 文档 是 HTML 文 档 ， 类 似 地 ， 结 束 标 
记 <html> 出 现在 HTML 文 档 的 尾部 。 

口 <head> 标记 : 出 现在 文档 的 起 始 部 分 ， 标 明文 档 的 头 部 信息 ， 一 般 包 括 标题 和 主题 信息 ， 其 
结束 标记 </head> 指 明文 档 标题 部 分 的 结束 。 

口 “<body> 标 记 : 用 来 指明 文档 的 主体 区 域 ， 该 部 分 通常 包容 其 他 字符 串 ， 例 如 标题 、 段 落 、 列 
表 等 。 读者 可 以 把 HTML 文 档 的 主体 区 域 简单 地 理解 成 标题 以 外 的 所 有 部 分 , 其 结束 标记 </body> 
指明 主体 区 域 的 结尾 。 


1.2 HTML 的 发 展 历史 


1969 年 前 后 ， 托 德 。 尼 尔 逊 提出 超 文本 的 概念 ，IBM 公司 的 Charkes Goklfard 等 设计 出 了 通用 标 
记 语 言 一 GML。 到 1978 年 ， 美 国 国家 标准 局 一 工作 组 对 GML 进行 了 规范 ， 推 出 了 命名 为 SGML 
的 通用 标记 语言 。1980 年 ，ISO 正式 确定 SGML 为 描述 各 种 电子 文件 结构 及 内 容 的 国际 通用 标准 。 

1990 年 ，Tim Berners-Lee 将 他 设计 的 初级 浏览 和 编辑 系统 在 网 上 合 二 为 一 ， 创 建 了 一 种 快速 小 型 
超 文 本 语言 来 为 他 的 想法 服务 。 他 设计 了 数 十 种 乃至 数 百 种 未 来 使 用 的 超 文本 格式 ， 并 想象 智能 客户 
代理 通过 服务 器 在 网 上 进行 轻松 谈判 并 翻译 文件 。 它 同 Macintosh 的 Claris XTND 系统 极为 相似 , 不 同 
的 是 它 可 以 在 任何 平台 和 浏览 器 上 运行 。 

最 初 的 HTML 语言 以 文本 格式 为 基础 ,可 以 用 任何 编辑 器 和 文字 处 理 器 来 为 网 络 创建 或 转换 文本 ， 
仅 有 不 多 的 几 个 标签 。 网 络 从 此 迅猛 发 展 ， 人 们 开始 在 网 上 发 布 信息 。 很 快 人 们 就 开始 琢磨 在 网 上 放 
置 图 像 和 图 标 。 

1993 年 ，NCSA 推出 了 Mosaic， 也 就 是 第 一 个 图 文 浏览 器 ， 从 此 Web 开始 迅速 地 发 展 起 来 。HTML 
语言 也 不 断 产生 新 型 、 功 能 强大 且 生 动 有 趣 的 标签 形式 , 例如 <background>、<frame>、<font> 和 <blink> 等 。 

但 是 此 时 , 出 现 了 许多 不 同 的 HTML 版 本 , 而 只 有 设计 者 和 用 户 共 有 的 HTML 部 分 才 可 以 正确 显 
示 。 因 此 在 这 段 时 间 ，W3C 都 在 激烈 争论 名 叫 HTML 3 的 新 技术 ， 该 文件 概括 了 所 有 全 新 的 特性 ， 但 
没有 任何 技术 支持 。 出 于 这 种 混乱 局 面 的 考虑 ， 在 1996 年 ，W3C 的 HTML Working Group 组 织 编写 
了 新 的 规范 ， 从 此 HTML 3.2 开始 发 展 ， 它 更 接近 于 现实 的 目标 ， 即 提供 给 内 容 商 和 浏览 器 发 展商 在 
研究 工作 中 一 个 公允 的 参考 标准 。 

到 现在 为 止 ，HTML 已 经 发 展 到 了 比较 成 熟 的 HTML 4 版 本 ， 在 这 个 版 本 下 的 语言 中 ， 规 范 更 加 
统一 ， 浏 览 器 之 间 的 兼容 性 也 更 加 完善 。 


1.3 网 页 设计 原则 


在 设计 网 页 时 ， 一 般 要 遵循 以 下 原则 : 
口 ”结构 性 : 在 设计 网 页 时 ， 须 注意 网 页 的 标记 结构 、 脚 本 语言 结构 、 使 用 条 列 的 方式 、 善 用 分 
段 及 空白 字符 ， 让 整体 结构 看 起 来 整齐 美观 ， 易 于 纠 错 及 理解 ， 在 发 生 问题 时 ， 才 能 很 快 找 
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到 错误 所 在 处 。 

通用 性 : 考虑 标记 语言 能 否 适用 于 各 种 浏览 器 ， 尽 量 以 大 多 数 浏览 器 都 支持 的 标记 语言 为 主 ， 
倘若 有 不 得 已 的 情况 ， 一 定 要 特别 加 以 注 明 ， 并 找 出 蔡 代 性 的 方案 。 遇 有 可 以 注解 或 说 明 的 
标记 或 组 件 属性 ， 应 该 尽 可 能 地 注 明 其 内 容 。 

差异 性 : 了 解 各 种 浏览 器 的 差异 ， 力 求 输出 的 结果 尽 可 能 一 致 。 

习惯 性 : 了 解 用 户 使 用 窗口 与 浏览 时 的 习惯 ， 如 组 件 摆 放 的 顺序 ， 习 惯用 鼠标 、Tab 键 、Esc 
键 及 Enter 键 等 操作 习惯 ， 或 因 网 页 下 载 时 间 太 长 ， 无 法 让 用 户 耐 心 等 候 等 因素 ， 都 是 设计 网 
页 时 必须 考虑 的 因素 。 

适用 性 : 有 些 组 件 会 因 用 户 的 窗口 环境 或 安装 的 程序 而 异 ， 可 能 在 作者 的 计算 机 里 可 以 完整 
地 执行 ， 而 在 其 他 用 户 的 计算 机 上 却 只 能 下 载 文档 ， 所 以 在 设计 完毕 后 ， 一 定 要 多 试 几 组 不 
同 平台 的 计算 机 ， 以 确保 网 页 的 可 行 性 。 

反复 性 : 反复 检查 是 否 错误 ， 是 否 有 需要 注意 文字 大 小 写 之 处 ， 以 及 名 称 是 否 正 确 。 


1.4 Dreamweaver 简介 


使 用 Dreamweaver， 设 计 师 可 以 随心 所 欲 地 编写 代码 、 设 计 网 站 网 页 以 及 进行 高 级 开发 。 无 论 是 
喜欢 手写 HTML 代码 还 是 习惯 于 可 视 化 环境 ，Dreamweaver 都 能 提供 方便 快捷 、 功 能 强大 的 工具 ， 使 
用 Dreamweaver 将 是 一 种 全 新 的 体验 。 在 易 用 、 创 新 、 规 范 等 优点 的 基础 上 ，Dreamweaver 还 拥有 更 
先进 的 网 页 布局 和 设计 环境 ， 以 及 更 为 强大 的 代码 编辑 功能 等 卓越 特性 。 

Dreamweaver MX 2004 的 操作 界面 主要 由 以 下 几 个 部 分 组 成 : 标题 栏 、 菜 单 栏 、 插 入 栏 、 文 档 工 
有 具 栏 、 文 档 窗口 、 全 辣 村 二 大 区 贡 朱 > 如 图 1-1 所 示 。 


1.4.1 


Pr EE | Em | 
Oe I FE ar 习 林 二 


图 1-1 Dreamweaver MX 2004 的 界面 布局 


标题 栏 


标题 栏 主要 包括 Dreamweaver 标记 、 应 用 程序 的 名 称 、 当 前 正在 编辑 文档 的 标题 和 名 称 等 信息 ， 


小 化 按钮 、 最 大 化 按钮 以 及 关闭 按钮 。 
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单 击 Dreamweaver 标记 图 可 以 打开 系统 菜单 。 在 Dreamweaver 标记 后 面 显 示 程 序 名 称 ， 之 后 的 中 
括号 “[ ]” 内 是 当前 打开 的 文档 的 标题 ， 小 插 号 “( ) ”内 是 该 文件 的 名 称 。 每 次 新 建 一 个 文档 ， 
Dreamweaver 都 会 自动 将 文档 标题 命名 为 “无 标题 文档 ”， 文 件 名 定义 为 Untitled-x。 其 中 ,文档 的 标 
题 和 文档 的 文件 名 称 是 不 同 的 概念 。 文件 的 标题 通常 在 文档 中 的 <title> 和 </title> 标 记 中 ， 是 在 用 浏览 器 
打开 文档 时 显示 在 浏览 器 窗口 的 标题 栏 上 的 名 称 ， 而 文件 的 名 称 则 是 文档 存储 在 磁盘 上 的 文件 名 。 


1.4.2 


菜单 栏 


菜单 栏 位 于 标题 栏 的 下 方 ， 它 包 插 文件、 编辑、 查看 、 插 入 、 修 改 、 文 本 、 命 令 、 站 点 、 窗 口 和 
帮助 10 个 菜单 项 ， 如 图 1-2 所 示 。 


奢 文件 四 编辑 多) 查看 如 插入 C) 修改 如 文本 0 命令 C) 站 点 @) 窗口 人 ) 帮助 WD ”||x|| 
图 1-2 菜单 栏 


下 面 简单 介绍 一 下 Dreamweaver 中 的 各 个 菜单 项 。 


口 


1.4.3 


“文件 ”菜单 : 包含 文件 操作 的 标准 菜单 项 ， 例 如 新 建 、 打 开 、 保 存 等 。“ 文 件 ” 菜 单 还 包 
含 各 种 其 他 命令 ， 用 于 查看 当前 文档 或 对 当前 文档 执行 操作 ,例如 “在 浏览 器 中 预览 ”和 “ 打 
印 代码 ”。 

“编辑 ”菜单 : 包含 文件 编辑 的 标准 菜单 项 ， 例 如 剪 切 、 复 制 和 粘贴 等 。“ 编 辑 ” 菜 单 还 包 
括 选择 和 搜索 命令 ， 即 “选择 父 标签 ”与 “查找 和 替换 ”， 并 且 提 供 对 键盘 快捷 键 编辑 器 、 
标签 库 编辑 器 和 参数 选择 编辑 器 的 访问 。 

“查看 ”菜单 :用 于 选择 文档 的 不 同 视图 (设计 视图 和 代码 视图 ) ， 并 且 可 以 用 于 显示 或 隐 
藏 不 同类 型 的 页 面 元 素 和 Dreamweaver 工 具 。 

“插入 ”菜单 : 提供 插入 面板 的 各 项 ， 用 于 将 各 种 对 象 插入 文档 。 

“修改 ”菜单 : 用 于 更 改选 定 页 面 元 素 或 项 的 属性 。 使 用 此 菜单 ， 可 以 编辑 标签 属性 、 更 改 
表格 和 表格 元 素 ， 并 且 为 库 和 模板 执行 不 同 的 操作 。 

“文本 ”菜单 : 用 于 设置 文本 的 各 种 格式 。 

“命令 ”菜单 : 提供 对 各 种 命令 的 访问 ， 包 括 根据 格式 参数 选择 设置 代码 格式 的 命令 、 创 建 
相册 的 命令 ， 以 及 使 用 Macromedia Fireworks 优 化 图 像 的 命令 。 

“站 点 ”菜单 : 包含 站 点 操作 菜单 项 ， 这 些 菜单 项 可 用 于 创建 、 打 开 和 编辑 站 点 ， 以 及 管理 
当前 站 点 中 的 文件 。 

“窗口 ”菜单 : 提供 对 Dreamweaver 中 所 有 面板 、 检 查 器 和 窗口 的 访问 。 

“帮助 ”菜单 : 提供 对 Dreamweaver 帮 助 文档 的 访问 ， 包 括 用 于 使 用 Dreamweaver 以 及 创建 对 
Dreamweaver 的 扩展 的 帮助 系统 ， 并 且 包括 各 种 语言 的 参考 材料 。 


插入 栏 


对 于 一 些 经 常 使 用 的 操作 ， 从 菜单 项 中 选择 不 是 很 方便 。 插 入 栏 是 Dreamweaver 提供 的 一 些 菜单 
命令 的 快捷 方法 ， 其 按钮 一 般 都 和 菜单 中 的 命令 相对 应 ， 运 用 插入 栏 可 以 更 方便 快捷 。 插 入 栏 集成 了 
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多 种 网 页 元 素 ， 包 括 图 像 、 文 字 等 ， 如 图 1-3 所 示 。 
宜 ” ” 转 回 电 | 国 国 - 狐 - 辣 加 | 加- 部 | 
图 1-3 插入 栏 


单 击 插入 栏 左边 的 向 下 箭头 更 ， 可 以 选择 不 同 的 工具 组 ,包括 布局 、 表 单 、 文 本 等 , 如 图 1-4 所 示 。 
如 果 选 择 “ 显 示 为 制 表 符 ” 命 令 ， 则 以 传统 的 方式 显示 插入 栏 ， 如 图 1-5 所 示 。 


插入 党 用 ”布局 | 表单 | 文本 | HiML | 应 用 程序 | Flash 元 素 | 收 关 天 。。 汉 
轧 回 昌 | 国 国 - 备 - 闫 四 | 图 - 轴 


图 1-4 工具 组 菜单 图 1-5 ”传统 方式 的 插入 栏 
“收藏 夹 ” 是 用 户 自 定义 的 组 ， 在 这 里 用 户 可 以 创建 自己 常用 的 按钮 。 


1.4.4 ”文档 工具 栏 


“文档 ”工具 栏 包含 按钮 和 弹出 式 菜单 ， 它 们 提供 各 种 “文档 ”窗口 视图 (如 “设计 ”视图 和 “ 代 
码 ”视图 ) 、 各 种 查看 选项 和 一 些 常用 操作 (如 浏览 器 中 预览 ) ， 如 图 1-6 所 示 。 
5 医生 . 汪 - 司 
图 1-6 文档 工具 栏 
要 显示 文档 工具 栏 ， 可 以 选择 “查看 ”| “工具 栏 ” | “文档 ”命令 。 文 档 工具 栏 中 各 个 图 标 按钮 的 
功能 分 别 如 下 : 
[名 (显示 代码 视图 ) : 显示 代码 窗口 。 
[ 萤 | (显示 代码 和 设计 视图 ) : 显示 代码 和 设计 窗口 。 
辆 (显示 设计 视图 ) : 显示 设计 窗口 。 
(活动 数据 视图 ) : 用 来 查看 实时 数据 视图 。 
标题 :开标 YX 销 。 (标题) : 用 来 设置 或 修改 文档 的 标题 。 
只 (文件 管理 ) : 单 击 该 按钮 ， 通 过 这 里 来 实现 消除 只 读 属性 、 获 取 、 取 出 、 上 传 、 存 回 、 
撤销 取出 、 设 计 注意 以 及 站 点 定位 等 功能 。 
口 内 (在 浏览 器 中 预览 /调试 ) : 单 击 该 按钮 在 定义 好 的 浏览 器 中 预览 或 调试 ， 或 是 编辑 浏览 
器 列表 。 
口 【SG (刷新 ) : 单 击 该 按钮 ， 可 以 刷新 设计 显示 中 通过 代码 更 改 的 部 分 。 
口服 (参考 ) : 单 击 该 按钮 来 启动 代码 属性 设置 面板 。 
口上 (代码 导航 ) : 单 击 该 按钮 来 移动 文档 里 定义 的 JavaScript 函 数 ， 设 置 或 删除 代码 里 的 
断 点 。 
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口 ” 强 (视图 选项 ) 〈 代 码 视图 模式 ) : 单 击 代码 视图 模式 下 的 选项 菜单 按钮 ， 可 以 选择 自动 换 
行 、 行 数 、 高 亮 显示 无 效 HTML、 语 法 颜色 、 自 动 缩 进 等 选项 ， 以 及 在 顶端 查看 设计 视图 。 

口 ” 国 (视图 选项 ) 〈 设 计 视图 模式 ) : 单 击 设计 视图 模式 下 的 选项 菜单 按钮 ， 可 以 选择 隐藏 所 
有 的 可 视 化 帮助 或 锁定 可 视 化 帮助 ， 如 表格 边框 、 层 边框 、 框 架 边 框 、 图 像 地 图 、 不 可 见 元 
素 、 表 头 、 标 尺 、 网 格 以 及 轮廓 图 像 。 


1.4.5 ”属性 面板 


“属性 ”面板 主要 用 于 显示 在 文档 窗口 中 所 选中 元 素 的 属性 ， 允 许 用 户 在 属性 面板 中 对 元 素 属性 
直接 进行 修改 。 根 据 选中 元 素 的 不 同 ， 属 性 面板 上 的 内 容 也 不 同 。 图 1-7、 图 1-8 分 别 为 文本 和 图 像 的 
属性 面板 。 


格式 四 无 。” 可 拉 式 WwW 无 ” | ”BIZX| 到 | 和 | 大 | 看 to[ 习 DDD 3 
子 体 四 民 U 了 证 可 大 小 @ 必 习 厂 ” ”J ”大 | 生 | 当 妆 | 村 w 厂 ” 习 


1-7 文本 属性 面板 


( 图 和 iaK ” 宽 如 |129 。 源 文 件 Ej/200551713242790. cf 名 局 | 交 @[ 寺 多 


商 D|123 链接 QU)| 注 缉 


地 图 如。 委 直 边 耻 0 目标 四 ) 过 EG| FF 
RR DO wTiwe| 低 解析 度 源 D)| 全 号 于 开 册 欧 V 面 习 


图 1-8 图 像 属 性 面板 


在 属性 面板 的 右 下 角 ， 通 常 都 有 一 个 指向 上 方 的 三 角形 图 标 。 单 击 该 三 角形 图 标 可 以 折 登 属性 面 
板 。 当 属性 面板 被 折合 时 ， 单 击 指向 下 方 的 三 角形 图 标 又 可 以 重新 展开 属性 面板 ， 显 示 更 多 的 属性 设 
置 内 容 。 

单 击 属性 面板 右上 角 的 国 图 标 ， 则 可 以 打开 属性 面板 菜单 。 在 菜单 中 可 以 选择 属性 面板 的 显示 
模式 。 


1.4.6 ”其 他 面板 


在 Dreamweaver 中 提供 了 一 系列 面板 ， 在 窗口 的 右 侧 以 面板 组 的 形式 显示 出 来 ， 如 图 1-9 所 示 。 
它 是 一 个 工具 集合 的 控制 框架 ， 可 以 将 各 种 窗口 、 面 板 放 置 在 其 中 ， 组 合成 为 选项 卡 的 形式 ， 以 节 
省 屏幕 空间 。 在 必要 时 还 可 以 将 这 些 浮 动 窗口 、 面 板 拖 离 ， 成 为 独立 的 可 停靠 浮动 面板 ， 如 图 1-10 
所 示 。 

如 果 希 望 将 某 个 面板 同 其 他 面板 组 合成 多 个 选项 卡 的 形式 ， 可 以 单 击 面 板 右 上 角 的 国 图 标 ， 从 打 
开 的 菜单 中 选择 “将 XX 组 合 在 ” 子 菜单 中 一 个 面板 进行 组 合 ， 如 图 1-11 所 示 。 
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[| 
vB， 志 


文件 
IEE 了 管理 站 点 


图 1-9 面板 组 图 1-10 单独 的 浮动 面板 图 1-11 以 选项 卡 形式 组 合 面板 
1.5 在 Dreamweaver 中 直接 编写 HTML 


在 Dreamweaver 中 可 以 直接 书写 HTML 的 代码 。 下 面 通过 一 个 HTML 小 实例 进行 说 明 。 
1.5.1 编写 HTML 代码 


(1) 启动 Dreamweaver MX 2004 程序 。 如 果 是 第 一 次 启动 该 程序 ， 系 统 会 弹出 “工作 区 设置 ”对 
话 框 ， 让 用 户 选择 工作 界面 的 风格 ， 如 图 1-12 所 示 。 如 果 以 后 改变 了 主意 ， 可 以 在 “首选 参数 ”对 话 
框 中 设置 成 不 同 的 工作 区 风格 。 

(2) 选中 右 侧 的 “代码 编写 者 ” 单 选 按钮 ， 单 击 “ 确 定 ”按钮 以 代码 视图 的 形式 打开 一 个 新 的 
HTML 文件 ， 如 图 1-13 所 示 。 


请 选择 您 喜欢 的 工作 区 布局 。 以 后 您 可 以 在 “首选 参数 ”中 切换 布局 。 


图 1-12 “工作 区 设置 ”对 话 框 图 1-13 ”Dreamweaver 的 代码 视图 
(3) 在 代码 中 <title> 与 <title> 标 签 之 间 的 内 容 就 是 新 建 HTML 文件 的 标题 ， 也 就 是 将 要 在 浏览 器 
的 标题 栏 中 显示 的 页 面 标题 。 这 里 将 其 更 改 为 “网 页 文件 的 标题 ”。 
(4) 在 <body> 与 </body> 标 签 之 间 添 加 主体 内 容 的 代码 ， 如 下 : 


<p> 欢 迎 学 习 HTML 语言 ! </p> 
<p> 我 们 愿 做 您 最 忠实 的 良师益友 ! </p> 
<p> 让 我 们 伴 您 一 起 走 入 HTML 的 世界 吧 ! ! </p> 
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这 样 一 个 最 基本 的 HTML 文件 就 编写 完成 了 。 
1.5.2 ”保存 并 查看 HTML 文件 


(1) 选择 “文件 ” |“ 保存” 命令 ， 打 开 如 图 1-14 所 示 的 “另存 为 ”对 话 框 。 

(2) 在 “保存 在 ”下 拉 列 表 框 中 选择 存盘 的 位 置 ， 在 “文件 名 ”文本 框 中 输入 文件 的 名 称 “ 实 例 
1”， 设 置 文件 的 保存 类 型 为 “HTML 文档 ”， 单 击 “保存 ”按钮 完成 文件 的 保存 。 

(3) 双击 保存 的 文件 ， 可 以 在 浏览 器 中 看 到 文件 的 效果 ， 如 图 1-15 所 示 。 


了 对 
保本 三 可 上 直 终 医 


我 们 愿 做 您 最 忠实 的 良师益友 Y 
让 我 们 伴 您 一 起 走 入 NTNL 的 世界 吧 ? 9 


EL] 
图 1-14 “另存 为 ”对 话 框 图 1-15 实例 1 的 页 面 效果 
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各 吾 吾 吾 吾 芋 


块 部 标记 
标题 标记 


页 面 的 至 体 标 记 


HTML 基本 标记 


<head> 
<title> 


元 信息 标记 一 一 <meta> 


基 诡 网址 标记 一 一 <base> 


body 


页 面 泽 释 标 记 一 <!-- --> 


本 章 介 绍 HTML 的 各 种 基本 标记 ， 这 些 都 是 一 个 完整 的 网 页 必 不 可 少 的 。 
通过 它们 可 以 了 解 网 页 的 基本 结构 及 其 工作 原理 。 
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2.1 头 部 标记 一 一 <head> 


在 HTML 语言 的 头 元 素 中 , 一 般 需 要 包括 标题 、 基 底 信息 、 元 信息 等 。HTML 的 头 元 素 是 以 <head> 
为 开始 标记 ， 以 </head> 为 结束 标记 的 。 一 般 情 况 下 ，CSS 和 JavaScript 都 是 定义 在 头 元 素 中 的 ， 而 定 
义 在 HTML 语 言 头 部 的 内 容 往往 不 会 在 网 页 上 直接 显示 。 它 用 于 包含 当前 文档 的 相关 信息 ,包括 <title>、 
<base>、<basefont>、<isindex>、<meta>、<style>、<link>、<script> 等 。 


下 面 介绍 在 HTML 头 部 标记 中 的 几 种 重要 标记 。 
2.2 ”标题 标记 一 一 <title> 


HTML 页 面 的 标题 一 般 是 用 来 说 明 页 面 用 途 的 ， 它 显示 在 浏览 器 的 标题 栏 中 。 每 个 HTML 页 面 都 
应 该 有 标题 ,在 HTML 文档 中 ， 标题 信息 设置 在 页 面 的 头 部 ， 也 就 是 <head> 与 </head> 之 间 。 标 题 标记 
以 <title> 开 始 ， 以 <ltitle> 结 束 。 

语法 : <title>…</title> 

说 明 : 在 标记 中 间 的 “…” 就 是 标题 的 内 容 ， 它 可 以 帮助 用 户 更 好 地 识别 页 面 。 页 面 的 标题 有 且 
只 有 一 个 ， 它 位 于 HTML 文档 的 头 部 ， 即 <head> 和 </head> 之 间 。 

下 面 以 实例 说 明 标 题 标 记 的 用 法 。 

实例 代码 : 

<html> 

<head> 

<title> 文 件 的 标题 </title> 

</head> 

<body> 

</body> 

</html> 

保存 页 面 后 在 IE 中 打开 ， 可 以 看 到 浏览 器 的 标题 栏 中 显示 了 刚才 设置 的 标题 “文件 的 标题 ”， 效 
果 如 图 2-1 所 示 。 


| 3 六 站 标题 _ merosort Internet Explorer 站 | 
| 文件 编辑 (E) ”查看 WW 收 戈 (&) 工具 D 和 bpd) | 


|]* 拓 -小 - 因 加 机 | 全 扫 霖 向 收 京 天 多 拒 体 > 
| 地址 (D) | 乱 ] bbookos Htm 源 文件 \02401 tite.html | 避 甘 到 


2-1 HTML 页 面 的 标题 
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2.3 ”元 信息 标记 一 一 <meta> 


meta 元 素 提供 的 信息 是 用 户 不 可 见 的 ， 它 不 显示 在 页 面 中 ， 一 般 用 来 定义 页 面 信息 的 名 称 、 关 键 
字 、 作 者 等 。 在 HTML 中 ，meta 标记 不 需要 设置 结束 标记 ， 在 一 个 尖 括 号 内 就 是 一 个 meta 内 容 ， 而 
在 一 个 HTML 头 页 面 中 可 以 有 多 个 meta 元 素 。 meta 元 素 的 属性 有 两 种 : name 和 http-equiv, 其 中 name 
属性 主要 用 于 描述 网 页 ， 以 便于 搜索 引擎 机 器 人 查找 、 分 类 (目前 几乎 所 有 的 搜索 引擎 都 使 用 网 上 机 
器 人 自动 查找 meta 值 来 给 网 页 分 类 ) 。 这 其 中 最 重要 的 是 description 站 点 在 搜索 引擎 上 的 描述 ) 和 
keywords (关键 词 ) 。 

下 面 根据 功能 的 不 同 分 别 介 绍 元 信息 标记 的 使 用 方法 。 


2.3.1 设置 页 面 关键 字 


设置 页 面 关键 字 是 为 了 向 搜索 引擎 说 明 这 一 网 页 的 关键 词 ， 从 而 帮助 搜索 引擎 对 该 网 页 进行 查找 
和 分 类 ， 它 可 以 提高 被 搜索 到 的 几率 ， 一 般 可 设置 不 只 1 个 关键 字 ， 之 间 用 逗号 隔 开 。 但 是 由 于 很 多 
搜索 引擎 在 检索 时 会 限制 关键 字数 量 ， 因 此 在 设置 关键 字 时 不 要 过 多 ， 注 意 每 一 个 关键 字 都 要 切中 
要 害 。 

语法 : <meta neme="keyword" content=" 具 体 的 关键 字 '> 

说 明 : 在 该 语法 中 ，name 为 属性 名 称 ， 这 里 是 “keyword”， 也 就 是 设置 网 页 的 关键 字 属 性 ， 而 
在 content 中 则 定义 了 有 具体 的 关键 字 的 内 容 。 

下 面 以 实例 来 具体 说 明 。 

实例 代码 : 

<html> 

<head> 

<title> 学 习 元 信息 标记 </title> 

<meta name="keyword" content="html, 元 信息 ,关键 字 "> 

</head> 

<body></body> 

</html> 


在 实例 中 设 定 了 “html”、“ 元 信息 ”和 “关键 字 ” 这 3 个 词语 作为 该 页 面 的 关键 字 。 


2.3.2 设置 页 面 描述 


设置 页 面 描述 也 是 为 了 便于 搜索 引擎 的 查找 ， 它 用 来 描述 网 页 的 主题 等 ， 与 关键 字 一 样 ， 设 置 的 
页 面 描述 也 不 会 在 网 页 中 显示 出 来 。 

语法 : <meta name="description" content=" 对 页 面 的 描述 语言 "> 

说 明 : 在 该 语法 中 ，name 为 属性 名 称 ， 这 里 设置 为 “description”， 也 就 是 将 元 信息 属性 设置 为 
页 面 描述 ， 在 content 中 定义 具体 的 描述 语言 。 
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在 上 一 实例 的 基础 上 添加 页 面 的 描述 信息 ， 实 例 代码 如 下 : 


<html> 

<head> 

<title> 学 习 元 信息 标记 </title> 

<meta name="keyword" content="html, 元 信息 ,关键 字 "> 
<meta name="description" content=" 关 于 HTML 使 用 的 网 站 "> 
</head> 

<body></body> 

</html> 


在 该 实例 中 ， 设 置 了 “关于 HTML 使 用 的 网 站 ”为 网 页 的 描述 。 


2.3.3 设置 编辑 工具 


现在 有 很 多 编辑 软件 都 可 以 制作 网 页 ， 在 源 代码 的 头 页 面 中 可 以 设置 网 页 编辑 工具 的 名 称 。 与 其 
他 meta 元 素 相同 ， 编 辑 工具 也 只 是 在 页 面 的 源 代码 中 可 以 看 到 ， 而 不 会 显示 在 浏览 器 中 。 

语法 : <meta name="generator" content=" 编 辑 软件 的 名 称 "> 

说 明 : 在 该 语法 中 ，name 为 属性 名 ， 设 置 为 “generator”， 也 就 是 设置 编辑 工具 ， 在 content 中 定 
义 具 体 的 编辑 器 名 称 。 

在 上 面 实例 的 基础 上 添加 编辑 工具 的 信息 ， 实 例 代 码 如 下 : 

<html> 

<head> 

<title> 学 习 元 信息 标记 </title> 

<meta name="keyword" content="html, 元 信息 ,关键 字 "> 

<meta name="description" content=" 关 于 HTML 使 用 的 网 站 "> 

<meta name="generator" content="Macromedia Dreamweaver MX 2004"> 

</head> 

<body></body> 

</html> 


在 这 一 实例 中 ， 以 Macromedia Dreamweaver MX 2004 作为 网 页 的 编辑 工具 。 
2.3.4” 设 定 作者 信息 


在 源 代码 中 还 可 以 设置 网 页 制作 者 的 姓名 信息 。 

语法 : <meta name="author" content=" 作 者 的 姓名 "> 

说 明 : 在 该 语法 中 ，name 为 属性 名 ， 设 置 为 “author”， 也 就 是 设置 作者 信息 ， 在 content 中 定义 
具体 的 信息 。 

在 上 面 实例 的 基础 上 添加 作者 的 信息 ， 实 例 代码 如 下 : 

<html> 

<head> 

<title> 学 习 元 信息 标记 </title> 

<meta name="keyword" content="html, 元 信息 ,关键 字 "> 
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<meta name="description" content=" 关 于 HTML 使 用 的 网 站 "> 

<meta name="generator content="Macromedia Dreamweaver MX 2004"> 
<meta name="author content=" 张 三 "> 

</head> 

<body></body> 

</html> 


在 这 一 实例 中 ， 将 作者 的 姓名 “ 张 三 ” 添 加 到 了 网 页 的 源 代码 中 。 
2.3.5 ”限制 搜索 方式 


网 页 可 以 通过 在 meta 中 的 设置 来 限制 搜索 引擎 对 页 面 的 搜索 方式 。 
语法 : <meta name="robots" content= "搜索 方式 "> 
说 明 : 在 该 语法 中 ， 搜 索 方 式 的 值 和 其 所 对 应 的 含义 见 表 2-1。 


表 2-1 content 值 与 对 应 的 含义 


content 的 值 含义 

all 页 面 将 被 检索 ， 且 页 面 上 的 链接 可 以 被 查询 
none 页 面 不 能 被 检索 ， 且 页 面 上 的 链接 不 可 以 被 查询 
index 页 面 将 被 检索 ， 但 页 面 上 的 链接 却 不 可 以 被 查询 
follow 页 面 上 的 链接 可 以 被 查询 

noindex 页 面 不 能 被 检索 ， 但 页 面 上 的 链接 可 以 被 查询 
nofollow 页 面 能 被 检索 ， 但 页 面 上 的 链接 却 不 可 以 被 查询 


下 面 的 实例 中 设 定 了 网 页 能 被 检索 ， 但 页 面 上 的 链接 却 不 可 以 被 查询 。 
实例 代码 : 

<html> 

<head> 

<title> 限 制 搜索 方式 </title> 

<meta name="robots" content="index "> 

</head> 

<body></body> 

</html> 


2.3.6 ”设置 网 页 文字 及 语言 


在 网 页 中 还 可 以 通过 语句 来 设 定语 言 的 编码 方式 。 这 样 ， 浏 览 器 就 可 以 正确 地 选择 语言 ， 而 不 需 
要 人 工 选 取 。 
语法 : <meta http-equiv="content-type" content="text/html; charset= 字 符 集 类 型 "> 


<meta http-equiv="Content-Language" content=" 语 言 "> 


说 明 : 在 该 语法 中 ，http-equiv 用 于 传送 HTTP 通信 协议 的 标 头 ， 也 就 是 设 定 标 头 属性 的 名 称 ， 而 
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在 content 中 才 是 具体 的 属性 值 。 其 中 charset 设置 了 网 页 的 内 码 语系 , 也 就 是 字符 集 的 类 型 ,中 国内 地 
常用 的 是 GB 码 , charset 往往 设置 为 gb 2312, 即 简体 中 文 。 英 文 是 ISO-8859-1 字符 集 , 此 外 还 有 BIG5、 
utf-8、shift-Jis、Euc、Koi8-2 等 字符 集 。 如 果 采 用 第 二 种 方法 ， 则 简体 中 文 的 设置 为 : 


<meta http-equiv="Content-Language" content="zh_CN"> 
下 面 的 实例 中 设置 了 语言 为 韩文 ， 代 码 如 下 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=euc-kr> 
<title> 设 定 其 他 语言 </title> 

</head> 

<body> 

</body> 

</html> 


在 运行 该 程序 时 ， 由 于 浏览 器 默认 情况 下 并 没有 安装 韩文 ， 所 以 会 出 现 需 要 安装 语言 的 窗口 ， 如 
图 2-2 所 示 。 
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2.3.7 ”设置 网 页 的 定时 跳 转 


在 浏览 网 页 时 经 常会 看 到 一 些 欢迎 信息 的 界面 ， 在 经 过 一 段 时 间 后 ， 这 一 页 面 会 自动 转 到 其 他 页 
面 中 ， 这 就 是 网 页 的 跳 转 。 使 用 HTTP 代码 就 可 以 很 轻松 地 实现 这 一 功能 。 

语法 : <meta http-equiv="refresh" content=" 跳 转 时 间 :url= 链 接地 址 "> 

说 明 : 在 该 语法 中 ，refresh 表示 网 页 的 刷新 ， 而 在 content 中 设 定 刷新 的 时 间 和 刷新 后 的 地 址 ， 时 
间 和 链接 地 址 之 间 用 分 号 相隔 。 默 认 情 况 下 ， 跳 转 时 间 是 以 秒 为 单位 的 。 

当 链接 地 址 为 一 个 新 的 网 页 地 址 时 ， 就 会 在 设 定 的 时 间 跳 转 到 这 个 新 的 网 址 ， 其 代码 如 下 : 

<html> 

<head> 

<title> 学 习 元 信息 标记 </title> 

<meta http-equiv="refresh" content="3;url=http://www.sohu.com"> 

</head> 

<body> 
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您 好 ， 本 页 在 3 秒 之 后 将 自动 跳 转 到 搜狐 网 站 

</body> 

</html> 

运行 程序 ， 效 果 如 图 2-3 所 示 。 

在 3 秒 之 后 ， 网 页 自动 跳 转 到 了 搜狐 网 站 ， 如 图 2-4 所 示 。 
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图 2-3 运行 自动 跳 转 的 页 面 图 2-4 跳 转 后 的 页 面 


当 语 法 中 的 链接 地 址 被 省 略 时 ， 网 页 的 功能 就 变 成 了 刷新 页 面 本 身 ， 这 在 不 断 更 新 数据 的 页 面 中 
常常 会 用 到 。 刷 新 页 面 的 代码 如 下 : 


<html> 

<head> 

<title> 页 面 的 刷新 </title> 

<meta http-equiv="refresh" content="60"> 
</head> 

<body> 

您 好 ， 本 页 每 隔 1 分 钟 自动 刷新 一 次 
</body> 

</html> 


运行 页 面 的 效果 如 图 2-5 所 示 。 


[加 Dilbooh09 Men 区 文件 oz109 refresh 届 新 hinl 了 ] 加 和 到 
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您 好 ， 本 页 每 隔 1 分 钟 自 动 刷新 一 次 


图 2-5 页 面 的 刷新 效果 


2.3.8 设 定 网 页 的 到 期 时 间 


在 某 些 网 站 上 会 设置 网 页 的 到 期 时 间 ， 一 旦 过 期 则 必须 到 服务 器 上 
语法 : <meta http-equiv="expires" content=" 到 期 的 时 间 "> 
说 明 : 在 该 语法 中 ， 到 期 的 时 间 必 须 是 GMT 时 间 格 式 。 
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实例 代码 : 


<html> 

<head> 

<title> 设 置 页 面 的 到 期 时 间 </title> 

<meta http-equiv="expires" content="Wed,27 July 2005 11:00:00 GMT"> 
</head> 

<body> 

</body> 

</html> 


在 实例 中 设置 了 网 页 的 到 期 时 间 为 2005 年 7 月 27 日 11 点 整 。 
2.3.9 禁止 从 缓存 中 调用 


浏览 器 一 般 为 了 节约 时 间 ， 都 在 本 地 硬盘 上 保存 一 个 网 上 的 文件 作为 临时 版 本 。 在 用 户 下 次 打开 
这 个 网 页 时 ， 浏 览 器 将 会 直接 调用 硬盘 上 的 这 个 版 本 ， 而 不 是 网 上 的 。 如 果 想 让 浏览 者 每 次 打开 网 页 
时 都 看 到 最 新 版 本 ， 那 么 就 需要 禁止 浏览 器 调用 缓存 中 的 版 本 。 如 果 在 网 页 中 设 定 了 禁止 缓存 调 阅 ， 
那么 用 户 一 旦 离开 网 页 ， 就 无 法 从 缓存 中 再 调 出 该 页 面 ， 而 要 到 网 络 中 查找 该 页 面 。 

语法 : <meta http-equiv="cache-control" content="no-cache"> 


<meta http-equiv="pragma" content="no-cache"> 


说 明 : 在 该 语法 中 ，cache-control 和 pragma 都 可 以 用 来 设 定 缓存 的 属性 ， 而 在 content 中 则 是 真正 
禁止 调用 缓存 的 语句 。 

实例 代码 ; 

<html> 

<head> 

<title> 设 置 禁止 调用 缓存 </title> 

<meta http-equiv="cache-control" content="no-cache"> 

<meta http-equiv="pragma" content="no-cache"> 

</head> 

<body> 

</body> 

</html> 


2.3.10 ”删除 过 期 的 cookie 


如 果 网 页 过 期 ， 则 删除 存盘 的 cookie。 

语法 : <meta http-equiv="set-cookie" content=" 到 期 的 时 间 "> 
说 明 : 在 该 语法 中 ， 到 期 的 时 间 必 须 是 GMT 时 间 格 式 。 
实例 代码 : 

<html> 


<head> 
<title> 删 除 过 期 的 cookie</title> 
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<meta http-equiv="set-cookie" content="Wed,27 July 2005 11:00:00 GMT"> 
<body> 
</body> 
</html> 


在 实例 中 ,设置 了 网 页 的 到 期 时 间 为 2005 年 7 月 27 日 11 点 整 ,也 就 是 这 个 时 候 删 除 存盘 的 cookie。 
2.3.11 ”强制 打开 新 窗口 


强制 页 面 在 当前 窗口 中 以 独立 的 页 面 显示 ， 可 以 防止 自己 的 网 页 被 别人 当 作 一 个 frame 页 调用 。 

语法 : <meta http-equiv="windows-target" content="_top"> 

说 明 : 在 该 语法 中 ，windows-target 表示 新 网 页 的 打开 方式 ， 而 content 中 设置 的 _top 则 代表 打开 
的 是 一 个 独立 页 面 。 

实例 代码 : 

<html> 

<head> 

<title> 强 制 打开 为 独立 页 面 </title> 

<meta http-equiv="windows-target" content="_top"> 

<body> 

</body> 

</html> 


2.3.12 设置 网 页 的 过 渡 效 果 


在 浏览 某 些 网 站 时 ， 常 常会 在 进入 或 退出 某 个 网 页 时 看 到 一 些 过 渡 效果 ， 使 得 网 页 更 加 生动 。 这 
些 效果 在 meta 属性 中 就 可 以 实现 。 

语法 : <meta http-equiv=" 过 渡 事 件 " content="revealtrans(duration= 过 渡 效 果 持续 时 间 ,transition= 过 渡 
方式 )"> 

说 明 : 在 该 语法 中 ， 过 渡 事 件 可 以 进入 页 面 或 者 离开 页 面 。 进 入 页 面 的 http-equiv 值 为 page-enter， 
离开 页 面 的 http-equiv 值 为 page-exist。 过 渡 效 果 的 持续 时 间 默 认 情 况 下 以 秒 为 单位 ， 过 渡 方式 的 编号 
见 表 2-2。 


表 2-2 ”过 渡 方式 的 编号 及 含义 


过 渡 方 式 
随意 溶解 
从 左右 两 端 向 中 间 展 开 
从 中 间 向 左右 两 端 展开 
从 上 下 两 端 向 中 间 展 开 
从 中 间 向 上 下 两 端 展开 
从 右上 角 向 左下 角 展开 
从 右 下 角 向 左上 角 展 开 
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续 表 
编 号 过 渡 方 式 过 渡 方 式 
7 从 右 至 左 从 左上 角 向 右 下 角 展 开 
8 垂直 百叶 窗 从 左下 角 向 右上 角 展 开 
9 水 平 百叶 窗 水 平 线 状 展开 
10 水 平 格 状 百叶 窗 垂直 线 状 展开 
11 垂直 格 状 百叶 窗 随机 产生 一 种 过 渡 方式 


利用 下 面 的 实例 来 演示 进入 和 离开 网 页 的 过 渡 效果 ,其 中 以 随意 溶解 的 效果 进入 页 面 14enter.html， 
而 以 垂直 线 状 展开 离开 页 面 14_exit.html， 过 渡 时 间 都 是 3 秒 。 
(1) 建立 离开 过 渡 效 果 的 页 面 14_exit.html， 代 码 如 下 : 


<html> 
<head> 
<title> 页 面 的 退出 效果 </title> 
<meta http-equiv="page-exit" content="revealtrans(duration=3,transition=12)"> 
</head> 
<body> 
<center> 
<img src="14/01.jpg" width="350" height="247"><br><br> 
<a href=14_page.html> 退 出 页 面 </a> 
</center> 
</body> 
</html> 


其 显示 效果 如 图 2-6 所 示 。 
(2) 建立 中 间 过 渡 的 页 面 14_page.html， 其 代码 如 下 : 


<html> 
<head> 
<title> 页 面 的 过 渡 效 果 </title> 
</head> 
<body> 
<center> 
<Img src="14/02.jpg" width=350 height=247><br><br> 
<a href="14enter.html"> 进 入 网 页 </a> 
</center> 
</body> 
</html> 


该 页 面 的 页 面 效 果 如 图 2-7 所 示 。 
(3) 创建 要 显示 进入 过 渡 效 果 的 页 面 14enter.html， 其 代码 如 下 : 


<html> 

<head> 

<title> 进 入 页 面 的 过 渡 效 果 </title> 

<meta http-equiv="page-enter" content="revealtrans(duration=3,transition=22)"> 
</head> 
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<body> 
<center> 


<img src="14/03.jpg" width=350 height=247><br><br> 
<a href=14_exit.html> 返 回 </a> 
</center> 


</body> 
</html> 


要 显示 进入 过 渡 效 果 的 页 面 14enter.html 的 页 面 效 果 如 图 2-8 所 示 。 
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2-6 14_exithtml 的 页 面 效果 图 2-7 过 渡 页 的 页 面 效果 


图 2-8 ”14enterhtml 的 页 面 效果 
(4) 运行 14_exithtml， 


单 击 “ 退 出 页 面 ”链接 文字 ， 可 以 看 到 如 图 2-9 所 示 的 退出 页 面 的 过 渡 效 果 。 
(5) 单 击 页 面 中 的 “进入 网 页 ”链接 文字 ， 可 以 打开 页 面 14enterhtml， 同 时 看 到 如 图 2-10 所 示 
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图 2-9 退出 页 面 的 过 渡 效 果 


图 2-10 进入 页 面 的 过 渡 效 果 


2.4 基底 网 址 标记 一 一 <base> 


URL 路 径 是 一 种 互联 网 地 址 的 表示 法 ， 在 这 个 数据 里 可 以 包括 以 何 种 协议 连接 、 要 连接 到 哪 一 个 
地 址 、 连 接地 址 的 端口 (Port) 号 以 及 服务 器 (Server) 里 页 面 的 完整 路 径 和 页 面 名 称 等 信息 。 在 HTML 
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中 ，URL 路 径 分 为 两 种 形式 : 绝对 路 经 和 相对 路 径 。 绝 对 路 径 是 将 服务 器 上 磁盘 驱动 器 名 称 和 完整 的 
路 径 写 出 来 ， 同 时 也 会 表现 出 磁盘 上 的 目录 结构 ; 相对 路 径 是 相对 于 当前 HTML 文档 所 在 目录 或 站 点 
根 目录 的 路 径 。 

HTML 页 面 通过 基底 网 址 把 当前 HTML 页 面 中 所 有 的 相对 URL 转换 成 绝对 URL。 一 般 情况 下 ， 
通过 基底 网 址 标记 <base> 设 置 HTML 页 面 的 绝对 路 径 ， 那 么 在 页 面 中 的 链接 地 址 只 需 设 置 成 相对 地 址 
即 可 ， 当 浏览 器 浏览 页 面 时 ， 会 通过 <base> 标 记 将 相对 地 址 附 在 基底 网 址 的 后 面 ， 从 而 转化 成 绝对 
地 址 。 

例如 ， 在 HTML 页 面 的 头 部 定义 基底 网 址 如 下 : 

<base href="http://www.new.com/sample"> 

在 页 面 主体 中 设置 的 某 一 个 相对 地 址 ， 如 下 : 

<a href="../01/sample01.html"> 

当 使 用 浏览 器 浏览 时 ， 这 个 链接 地 址 就 变 成 如 下 的 绝对 地 址 : 

http://www.new.com/sample/01/sample01.html 

因此 , 在 HTML 页 面 中 设置 基底 标记 时 不 应 该 多 于 一 个 , 而 且 要 将 其 放置 在 头 部 以 及 任何 包含 URL 
地 址 的 语句 之 前 。 

语法 : <base hre 伍 "链接 地 址 " target=" 新 窗口 的 打开 方式 "> 

说 明 : 在 该 语法 中 ，“ 链 接地 址 ”就 是 要 设置 的 页 面 的 基底 地 址 ， 而 “新 窗口 的 打开 方式 ”可 以 
设置 为 不 同 的 效果 ， 其 属性 值 及 含义 见 表 2-3。 


表 2-3 ”链接 窗口 的 打开 方式 


在 上 一 级 窗口 打开 ,一般 常常 用 在 分 帧 的 框架 页 中 


在 同一 窗口 打开 ， 可 以 省 略 
在 浏览 器 的 整个 窗口 打开 ， 忽 略 任何 框架 


下 面 以 实例 说 明 该 标记 的 使 用 方法 ， 实 例 代码 如 下 : 


<html> 

<head> 

<base href="http://www.taobao.com" target="_blank"> 

<title> 学 习 元 信息 标记 </title> 汉学 习 元 信息 标记 - Microsoft Internet Exploner lolz 
| 文件 中 护 丝 个 查看) 收藏。 工具 D 和 Bot | 

</head> | -PE -小 -加 因 全 | 风 扫 过 国 收 戌 天 各 吉村 ” 

<body> | 弛 村 (D) | 乱 ] 0:\bookio9 html 尖 文件 WOztl5base ,html 了 | Fe 到 

<a href="../15.html"> 打 开 一 个 相对 地 址 </a> 人 E| 

打开 一 个 相 ; 4 

</body> 开 一 个 相关 

</html> 

运行 该 程序 ， 当 鼠标 移动 到 链接 文字 上 面 时 ， 可 以 看 到 在 


| 
IE 的 状态 栏 中 显示 出 其 完整 的 链接 地 址 ， 它 是 由 代码 中 设置 的 。 届 mmmmepoemisnm| | “| ”加 0 ss 万 
基底 地 址 加 上 程序 中 的 相对 地 址 组 成 的 ， 如 图 2-11 所 示 。 图 2-11 设置 基底 地 址 
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2.5 页 面 的 主体 标记 一 一 body 


网 页 的 主体 部 分 以 <body> 标 记 标志 它 的 开始 ， 以 </body> 标 志 它 的 结束 。 在 网 页 的 主体 标记 中 有 很 
多 的 属性 设置 ， 包 括 页 面 的 背景 设置 、 文 字 属性 设置 、 链 接 设 置 、 边 距 设 置 等 。 下 面 将 逐步 介绍 这 些 
网 页 主体 标记 的 基本 属性 。 


2.5.1 设置 页 面 背景 色 一 一 bgcolor 


设置 整个 页 面 的 背景 颜色 ， 需 要 用 到 bgcolor 属性 ， 它 使 用 “#” 加 上 6 位 的 十 六 进 制 值 来 表现 颜 
色 。 其 中 #FFFFFF 为 白色 ，#000000 为 黑色 ，#FF0000 为 红色 ，#00FF00 为 绿色 ，#0000FF 为 蓝 色 。 

语法 : <body bgcolor=" 颜 色 代 码 "> 

说 明 : 该 语法 中 的 body 就 是 页 面 的 主体 标记 ， 也 就 是 说 设置 页 面 颜色 要 和 页 面 的 主体 标记 放置 在 
一 起 。 

下 面 的 实例 设置 了 页 面 的 背景 色 为 淡 蓝 色 ， 其 代码 如 下 : 

<html> 

<head> 

<title> 设 置 页 面 背景 色 </title> 

</head> 

<body bgcolor="#3399CC"> 

</body> 

</html> 

运行 这 段 代码 , 可 以 看 到 打开 的 页 面 背景 为 淡 蓝 色 , 颜色 的 - 
值 为 #8399CC， 效 果 如 图 2-12 所 示 。 图 2-12 设置 页 面 的 背景 颜色 


[BE EE] 


2.5.2 ”设置 背景 图 片 一 一 background 


在 网 络 上 除了 看 到 各 种 背景 色 的 页 面 之 外 ， 还 可 以 看 到 一 些 以 图 片 作为 背景 的 网 页 。 使 用 恰当 的 
图 片 作为 背景 能 够 使 页 面 看 上 去 更 加 生动 美观 。 用 图 片 作为 背景 需要 使 用 background 属性 ， 还 可 以 设 
置 背 景 图 片 的 平 铺 方 式 、 显 示 方式 等 。 

语法 : <body background=" 文 件 链接 地 址 " bgproperties=" 背 景 图 片 固定 属性 "> 

说 明 : 文件 的 链接 地 址 可 以 是 相对 地 址 ， 也 就 是 本 机 上 图 片 文件 的 存储 位 置 ， 也 可 以 设置 为 网 上 
的 图 片 资料 ， 如 http://dvd.e0413.com/UPLOAD/IMGWSF/2005491443501.jpg。 在 默认 情况 下 ， 用户 可 以 
省 略 bgproperties 属性 ， 这 时 图 片 会 按照 水 平和 垂直 的 方向 不 断 重 复出 现 ， 直 到 铺 满 整个 页 面 。 如 果 将 
bgproperties 属性 设置 为 fxed， 那 么 当 滚动 页 面 时 ， 背 景 图 像 也 会 跟着 移动 ， 这 相对 浏览 者 来 说 ， 就 是 
总 停留 在 相同 的 位 置 上 。 

下 面 以 实例 说 明 背 景 图 片 的 设置 与 显示 效果 。 

(1) 设置 一 个 图 片 文件 作为 网 页 的 背景 ， 默 认 情 况 下 不 设置 bgproperties 属性 ， 此 时 图 片 将 在 水 
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平 


音 
章 


如 
图 


| 文件 坊 加 (查看 WW 收 庆 ) 工 | ”| 


J+AE.~» .D4 da | 


和 垂直 方向 平 铺 图 像 ， 代 码 如 下 : 


<html> 

<head> 

<title> 背 景 图 片 </title> 

</head> 

<body background="17/01.jpg"> 

</body> 

</html> 

运行 这 段 代码 ， 可 以 看 到 如 图 2-13 所 示 的 效果 。 图 像 在 水 平和 垂直 方向 平 铺 。 

(2) 如 果 和 希望 图 片 不 重复 显示 ， 一 般 情况 下 需要 借助 CSS 样式 ， 这 里 简单 介绍 一 下 ， 在 后 面 的 

节 中 还 将 详细 讲解 CSS 样式 表 的 使 用 方法 。 

对 于 网 页 背景 的 样式 设置 ， 一 般 在 头 部 标记 中 添加 style 标记 ， 代 码 如 下 : 

<html> 

<head> 

<title> 背 景 图 片 </title> 

<style type="text/css"> 

body {background-repeat:no-repeat} 

</style> 

</head> 

<body background="17/01.jpg"> 

</body> 

</html> 

在 这 段 代码 中 ，background-repeat 的 值 设置 为 no-repeat， 也 就 是 不 重复 ,运行 效果 如 图 2-14 所 示 。 
果 在 这 段 代 码 中 ， 将 background-repeat 的 值 设 置 为 repeat-x， 则 背景 图 片上 只 在 水 平方 向 平 铺 ， 效 果 如 
2-15 所 示 。 相 反 ， 如 果 设置 为 repeaty， 则 只 在 垂直 方向 平 铺 。 
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局 和 加 - 
图 2-13 平 铺 图 像 作为 背景 图 2-14 背景 图 像 单独 显示 图 2-15 背景 图 像 水 平平 铺 效果 
(3) 除了 设置 背景 是 否 重复 之 外 ， 在 网 页 中 还 可 以 设置 背景 图 片 是 否 变 化 。 这 一 属性 是 通过 


bgproperties 参数 来 设 定 的， 将 bgproperties 的 值 设 置 为 fixed， 背 景 图 片 会 固定 在 页 面 上 静止 不 动 。 其 


代 


码 如 下 : 


<html> 
<head> 
<title> 背 景 图 片 </title> 
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</head> 
<body background="17/02.jpg" bgproperties=fixed> 
</body> 
</html> 


运行 这 段 代码 后 的 效果 如 图 2-16 所 示 。 当 拖 动 滚动 条 时 ， 会 发 现 只 有 文字 在 动 ， 而 背景 是 静止 不 
动 的 ， 如 图 2-17 所 示 。 
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图 2-16 运行 代码 的 效果 图 2-17” 拖 动 滚动 条 的 效果 
2.5.3 ”设置 文字 颜色 一 一 text 


在 页 面 中 除了 背景 之 外 ， 对 于 默认 文字 的 颜色 设置 可 以 通过 text 参数 来 实现 。 在 没有 对 文字 的 颜 
色 进 行 单独 定义 时 ， 这 一 属性 可 以 对 页 面 中 所 有 的 文字 起 作用 。 

语法 : <body text=" 颜 色 代 码 "> 

说 明 : 在 该 语法 中 , text 的 属性 值 与 设置 页 面 背 景色 相同 , 也 就 是 说 该 属性 设置 也 和 在 页 面 的 主体 
标记 放置 在 一 起 。 

实例 代码 : 

<html> EE 人 站 see 

<head> [OCTTTTETTTTYSG | 

<title> 设 置 页 面 文字 颜色 </title> 

</head> 

<body bgcolor="#99CCCC" text="#FF0000"> 

设置 页 面 的 文字 颜色 
</body> 
iat BED 厂矿 | 王 厅 和 


运行 这 段 代 码 ， 实 现 的 效果 如 图 2-18 所 示 。 图 2-18 设置 页 面 文字 颜色 


2.5.4 ”设置 链接 文字 属性 一 一 link 


在 网 页 创作 中 ， 除 了 文字 、 图 片 等 ， 超 链接 也 是 最 为 常用 的 一 种 元 素 。 超 链接 中 以 文字 链接 最 多 ， 
在 默认 情况 下 ， 浏 览 器 以 蓝 色 作为 超 链接 文字 的 颜色 ; 访问 过 的 文字 则 变 为 暗 红 色 。 用 户 在 创作 网 页 
时 ， 可 以 通过 link 参数 修改 链接 文字 的 颜色 。 
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语法 : <body link=" 颜 色 代 码 "> 

说 明 : 这 一 属性 的 设置 与 前 面 几 个 设置 颜色 的 参数 类 似 ， 都 是 与 body 标签 放置 在 一 起 ， 表 明 它 对 
网 页 中 所 有 未 单独 设置 的 元 素 起 作用 。 

(1) 下 面 通过 实例 设置 未 访问 的 链接 文字 的 颜色 ， 代 码 如 下 : 


<html> 
<head> 
<title> 页 面 的 链接 文字 </title> 
</head> 
<body text="#000000" link="#FFOOFF"> 
<center> 
设置 文字 的 链接 效果 
<br><br> 
<a href="http://www.yahoo.com"> 链 接 文字 </a> 
<br><br> 
</center> 
</body> 
</html> 


运行 这 段 代码 , 可 以 看 到 链接 文字 的 颜色 已 经 不 是 默认 的 蓝 色 , 而 是 网 页 中 设置 的 紫色 , 如 图 2-19 
所 示 。 

(2) 在 这 段 代 码 的 基础 上 ， 添 加 正在 访问 的 文字 颜色 设置 。 这 一 属性 需要 用 到 alink 参数 ， 添 加 
后 的 代码 如 下 : 


<html> 
<head> 
<title> 页 面 的 链接 文字 </title> 
</head> 
<body text="#000000" link="#FFOOFF" alink="FF0000"> 
<center> 
设置 文字 的 链接 效果 
<br><br> 
<a href="http://www.yahoo.com"> 链 接 文字 </a> 
<br><br> 
<a href="http://www.taobao.com"> 正 在 访问 的 链接 </a> 
</center> 
</body> 
</html> 


运行 这 段 代码 之 后 ， 单 击 链 接 文字 “正在 访问 的 链接 ”， 会 发 现 按 下 鼠标 时 ， 文 字 颜 色 变 成 了 红 
色 ， 如 图 2-20 所 示 。 

(3) 在 这 段 代码 的 基础 上 修改 一 部 分 代码 ， 使 用 vlink 参数 设置 访问 后 的 文字 链接 颜色 ， 完 成 的 
代码 如 下 : 


<html> 
<head> 
<title> 页 面 的 链接 文字 </title> 


</head> 
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<body text="#000000" link="#FFOOFF" alink="FF0000" vlink="996600"> 
<center> 
设置 文字 的 链接 效果 
<br><br> 
<a href="http://www.yahoo.com"> 链 接 文字 </a> 
<br><br> 
<a href="http://www.huachu.com"> 已 经 访问 过 的 链接 </a> 
</center> 
</body> 
</html> 


运行 这 段 代码 ， 会 看 到 访问 过 的 链接 文字 颜色 变 成 了 棕 褐 色 ， 如 图 2-21 所 示 。 


页 面 的 链接 文字 - Microsoft Intemee ET]EE3| 
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图 2-19 设置 链接 文字 的 颜色 图 2-20 设置 正在 访问 的 文字 颜色 图 2-21 设置 访问 后 的 文字 链接 颜色 
2.5.5 ”设置 边 距 一 一 margin 


在 网 页 的 制作 过 程 中 ， 还 可 以 定义 页 面 的 空白 ， 也 就 是 内 容 与 浏览 器 边框 之 间 的 距离 。 其 中 包括 
上 边框 和 左边 框 ， 其 设置 方法 类 似 。 
语法 : <body topmargin= 上 边 距 的 值 leftmagin= 左 边 距 的 值 > 
说 明 : 在 默认 情况 下 ， 边 距 的 值 是 以 像素 为 单位 的 ， 下 面 以 实例 说 明 设 置 边 距 的 效果 。 
实例 代码 : 
<html> 
<head> 
<title> 设 置 边 距 </title> 
</head> 
<body topmargin=60 leftmargin=40> 
设置 页 面 的 上 边 距 为 60 像素 
<br> 
设置 页 面 的 左边 距 为 40 像素 
</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 设置 边 距 前 后 的 对 比 效果 ， 设 置 边 距 前 的 效果 如 图 2-22 所 示 ， 设 置 自 定 
义 的 边 距 效果 如 图 2-23 所 示 。 
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设置 页 面 的 上 边 四 为 60 像素 
设置 页 面 的 左边 距 为 40 像 素 


设 署 页 面 的 上 边 距 为 60 像 素 
设置 页 面 的 左边 距 为 40 像 素 
引 习 
[ [三 德 晴 EE EE] 有 4 
图 2-22 默认 的 页 面 效 果 图 2-23 设置 边 距 的 效果 


2.6 页 面 注释 标记 一 一 <!l-- --> 


在 网 页 中 ， 除 了 以 上 这 些 基 本 元 素 外 ， 还 包含 一 种 不 显示 在 页 面 中 的 元 素 ， 那 就 是 代码 的 注释 文 
字 。 适 当 的 注释 可 以 帮助 用 户 更 好 地 了 解 网 页 中 各 个 模块 的 划分 ， 也 有 助 于 以 后 对 代码 的 检查 与 维护 ， 
是 一 种 很 好 的 编程 习惯 。 

语法 : <!-- 注 释 的 文字 --> 

说 明 : 注释 文字 的 标记 很 简单 ， 只 需要 在 语法 中 “注释 的 文字 ”的 位 置 上 添加 需要 的 内 容 即 可 。 

实例 代码 : 

<html> 

<head> 

<title> 设 置 代码 的 注释 </title> 

</head> 

<body> 

< 上 -- 居 中 显示 --> 

<center> 
注释 语句 是 用 来 帮助 用 户 理解 代码 、 维 护 代码 的 。<| 
<!-- 超 级 链接 --> 
<a href="http://www.microsoft.com"> 文 字 </a> 


</center> 站 -回国 全 | 司 扩 革 甸 WRR 友信 一 
</body> (0) 各]:\bcoklos homr 源 文中 oz2lhtml 可 Be 
</html> 
在 这 段 代 码 中 ，“ 居 中 显示 ”和 “超级 链接 ”这 几 

个 字 就 是 对 代码 的 注释 ， 而 代码 所 在 行 就 是 网 页 的 注释 加 
语句 ， 并 不 显示 在 浏览 器 中 ， 效 果 如 图 2-24 所 示 。 Es SS 各 
图 2-24 页面 注释 
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在 网 页 创作 中 ,文字 是 最 基本 的 元 素 之 一 。 增 加 文字 的 易 读 性 ,让 浏览 者 在 
组 时 间 内 阅读 更 多 、 理 解 更 多 信息 , 并 达到 视觉 艺术 及 传达 的 功能 是 网 页 创作 者 
追求 的 目标 。 本 章 将 介绍 各 种 文字 标记 的 使 用 方法 。 
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3.1 标题 文字 的 建立 


在 浏览 网 页 时 ， 常 常 看 到 一 些 标题 文字 ， 用 于 对 文本 中 的 章节 进行 划分 ， 它们 以 固定 的 字号 显示 。 
HTML 文档 中 的 标题 文字 分 别 用 来 指明 页 面 上 的 1 一 6 级 标题 。 


3.1.1 标题 文字 标记 


标题 文字 共 包 含 6 种 标记 ， 分 别 表示 6 个 级 别 的 标题 ， 每 一 级 别 的 字体 大 小 都 有 明显 的 区 别 , 从 1 
级 一 6 级 依次 减 小 。 

语法 : 

1 级 标题 ，<h1>…</hl> 

2 级 标题 : <h2>…</h2> 

依次 下 去 ， 到 6 级 标题 。 

说 明 : 在 该 语法 中 ，1 级 标题 使 用 最 大 的 字号 表示 ;6 级 标题 使 用 的 是 最 小 的 字号 。 

实例 代码 : 

<!-- 这 是 关于 标题 文字 的 实例 -> 


<html> 
<head> 
<title> 标 题 文 字 的 效果 </title> EE 
</head> [2D me Bel wR I Mm 
<body> 地 a J i | 
<h1>1 级 标题 的 效果 </h1> | 
<h2>2 级 标题 的 效果 </h2> 1 级 标题 的 效果 
<h3>3 级 标题 的 效果 </h3> 2 级 标题 的 效果 
<h4>4 级 标题 的 效果 </h4> es 
<h5>5 级 标题 的 效果 </h5> 3 多 标题 的 并 过 
<h6>6 级 标题 的 效果 </h6> ei 
</body> 5 投标 的 效果 
hi 5 标题 的 名 竺 
Em | Em 


运行 这 段 代码 可 以 看 到 网 页 中 6 种 不 同 大 小 的 标 
题 文字 ， 如 图 3-1 所 示 。 Se 


3.1.2 ”标题 文字 的 对 齐 方式 一 align 


默认 情况 下 ， 标 题 文字 是 左 对 齐 的 。 而 在 网 页 制作 的 过 程 中 ， 可 以 实现 标题 文字 的 编排 设置 。 对 
于 文字 标题 的 属性 设置 中 ， 最 常用 的 就 是 关于 对 齐 方式 的 设置 ， 这 需要 使 用 align 参数 进行 设置 。 

语法 : align= 对 齐 方式 

说 明 : 在 该 语法 中 ，align 属性 需要 设置 在 标题 标记 的 后 面 ， 其 对 齐 方式 的 取 值 见 表 3-1。 
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表 3-1 标题 文字 的 对 齐 方式 


属 性 值 含义 
left 左 对 齐 
center 居中 对 齐 
right 右 对 齐 
实例 代码 : 
<!-- 设 置 标题 文字 的 不 同 对 齐 方 式 --> 
<html> 
<head> 
<title> 标 题 文字 的 对 齐 效果 </title> 
</head> 
<body> 
<h1>1 级 标题 的 默认 对 齐 效 果 </h1> 
<h2 align=left>2 级 标题 的 左 对 齐 效果 </h2> ee OS 
<h3 align=center>3 级 标题 的 居中 对 齐 效果 </h3> 1 级 标题 的 默认 对 齐 效果 1 
<h4 align=right>4 级 标题 的 右 对 齐 效 果 </h4> 2 级 标题 的 左 对 卉 效果 
Shedy> 3 级 标题 的 居中 对 齐 效果 
</html> 4 级 标题 的 右 对 齐 效 染 
运行 这 段 代 码 ， 可 以 看 到 不 同 对 齐 方式 的 标题 效果 ， 如 Se 一 
图 3-2 所 示 。 图 3-2 标题 文字 的 对 齐 效果 


3.2 文字 格式 标记 


除了 标题 文字 外 ， 在 网 页 中 普通 的 文字 信息 更 是 不 可 缺少 的 。 而 多 种 多 样 的 文字 效果 可 以 使 网 页 
变 得 更 加 绚丽 。 

在 网 页 的 编辑 中 ， 可 以 直接 在 文字 的 主体 部 分 输入 文字 ， 而 这 些 文字 便 会 显示 在 页 面 中 。 可 以 说 ， 
这 是 HTML 语言 编辑 中 最 简单 的 事情 ， 只 需要 在 <body> 标 记 和 </body> 标 记 之 间 输 入 相应 的 文字 即 可 。 
重要 的 是 如 何 设置 不 同 的 文字 效果 , 而 这 些 属 性 的 设置 都 位 于 文字 格式 标记 <font> 中 ,下 面 将 逐一 进行 
讲解 各 种 文字 格式 的 设置 方式 。 


3.2.1 设置 文字 字体 一 一 face 


在 HTML 语言 中 ， 可 以 通过 face 属性 设置 文字 的 不 同 字体 效果 。 而 设置 的 字体 效果 必须 在 浏览 
安装 了 相应 的 字体 后 才 可 以 正确 浏览 ， 否 则 这 些 特 殊 字体 会 被 浏览 器 中 的 普通 字体 所 代替 。 因 此 ， 在 
网 页 中 尽量 减少 使 用 过 多 的 特殊 字体 ， 以 免 在 用 户 浏览 时 无 法 看 到 正确 的 效果 。 由 于 浏览 器 默认 情况 


字体 。 
语法 : <font face=" 字 体 1, 字 体 2"> 应 用 字体 的 文字 </font> 
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说 明 : 在 该 语法 中 ，face 属性 的 值 可 以 是 1 个 或 者 多 个 。 默 认 情况 下 ， 使 用 第 1 种 字体 进行 显示 ; 
如 果 第 1 种 字体 不 存在 ， 则 使 用 第 2 种 字体 进行 代替 ， 以 此 类 推 。 如 果 设 置 的 儿 种 字体 在 浏览 器 中 都 


不 存在 ， 则 会 以 默认 字体 显示 。 
实例 代码 : 


<!-- 设 置 不 同 的 文字 字体 一 > 
<html> 
<head> 
<title> 不 同 字 体 的 显示 效果 </title> 
</head> 
<body> 
<font face=" 经 典 空 下 圆 简 "> 经 典 空 垂 圆 简 的 字体 效果 </font><br> 
<font face=" 黑 体 "> 黑体 效果 </font><br> 
<font face="Times New Roman,Times"> English fonts</font> 
</body> 
</html> 


运行 这 段 代码 , 可 以 看 到 几 种 不 同 的 字体 效果 , 如 图 3-3 所 示 。 


3.2.2 ”设置 字号 一 一 size 


习 不同 字 件 的 显示 效果 - Microsoft Internet Explg 
上 文件 吕 ”编辑 四 查看， 收 诚 (8) 工具 D 玫 助 ”| 
+ + -BD Dr wm 

正人 ] oiibooho9 rmh 油 文才 olorace hml 。 芝 ] 人 > 转 到 | 


合 典 空 量 国 简 的 字体 效果 
黑体 效果 
English fonts 


SE 


图 3-3 设置 不 同 的 文字 字体 


除了 字体 外 ， 文 字 的 大 小 也 是 吸引 用 户 注意 的 一 个 元 素 。 除 了 使 用 标题 文字 标记 设置 固定 大 小 的 
字号 之 外 ，HTML 语言 提供 了 <font> 标 记 的 size 属性 来 设置 普通 文字 的 字号 。 


语法 : <font size=" 文 字 字号 "></font> 


说 明 : 在 该 语法 中 ， 文 字 的 字号 可 以 设置 为 1~7， 也 可 以 是 +1~+7 或 者 是 -1~7。 这 些 字号 并 没有 
一 个 固定 的 大 小 值 ， 而 是 相对 于 默认 文字 大 小 来 设 定 的 ， 默 认 文字 的 大 小 与 3 号 字 相同 ， 而 数值 越 大 ， 


文字 也 越 大 。 
实例 代码 : 


<|-- 设 置 不 同 的 文字 大 小 一 > 

<html> 

<head> 

<title> 不 同 字 号 文字 的 效果 </title> 

</head> 

<body> 
<font size="1">1 号 字体 的 效果 </font><br> 
<font size="2">2 号 字体 的 效果 </font><br> 
<font size="3">3 号 字体 的 效果 </font><br> 
<font size="4">4 号 字体 的 效果 </font><br> 
<font size="5">5 号 字体 的 效果 </font><br> 
<font size="6">6 号 字体 的 效果 </font><br> 
<font size="7">7 号 字体 的 效果 </font><br> 


<font size="+2"> 上 默认 字号 +2， 也 就 是 5 号 字体 的 效果 </font><br> 


<font size="-1"> 上 默认 字号 -1， 即 2 号 字体 的 效果 </font> 
</body> 
</html> 


运行 这 段 代 码 ， 可 以 看 到 文字 的 大 小 变化 ， 其 效果 如 图 3-4 所 示 。 


| 
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SR EE 动因 二 mW 


ET 
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5 号 字体 的 效果 
6 号 字体 的 效果 
7 号 字体 的 效果 


默认 字号 12， 也 就 是 5 号 字体 的 效果 


二 号 -1， 革 ?字体 的 站 果 


[EE a 


3-4 设置 不 同 的 字号 
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3.2.3 设置 文字 颜色 一 一 color 


在 HTML 页 面 中 ， 还 可 以 通过 不 同 的 颜色 表现 不 同 的 文字 效果 ， 从 而 增加 网 页 的 亮丽 色彩 ， 吸 引 
浏览 者 的 注意 。 

语法 : <font color=" 颜 色 代码 "></font> 

说 明 : 与 网 页 背景 色 的 设置 类 似 ， 颜 色 代码 也 是 十 六 进 制 的 。 

实例 代码 : 

<[- 设 置 不 同 的 文字 颜色 -> 


<html> 

<head> 

<title> 不 同色 彩 的 文字 效果 </title> 

</head> 

<body> 
<font face=" 黑 体 "color="#0099FF"> 淡 蓝 色 的 黑体 效果 </font><br> 
<font size="2" color="#990000"> 上 暗 红色 的 2 号 文字 效果 </font><br> 
<font face=" 经 典 空 琶 圆 简 ”size="5" color="#FF6600"> 桔 色 的 5 号 

经 典 空 委 圆 简 </font> 


瑟 直 月 他 囊 的 立 宇 效果 -Microsoft Internet Explorer 


[lA JE J: 国 WE led 
[ET] 


Spodye 匀 便 园 简 
</html> 
运行 这 段 代码 ， 可 看 到 不 同色 彩 的 文字 效果 ， 如 图 3-5 所 示 。 EE a 


图 3-5 设置 不 同 的 文字 颜色 
3.2.4 粗 体 、 和 斜体 、 下 划 线 一 一 strong、em、u 


在 浏览 网 页 时 ， 还 常常 可 以 看 到 一 些 特殊 效果 的 文字 ， 例 如 粗 体 字 、 和 斜体 字 以 及 下 划 线 文字 。 而 
这 些 文字 效果 也 可 以 通过 设置 HTML 语言 的 标记 来 实现 。 
语法 : <strong> 粗 体 的 文字 </strong> 
<em> 和 斜体 字 </em> 
<u> 带 下 划 线 的 文字 </u> 
说 明 : 这 几 种 效果 的 语法 类 似 ， 只 是 标记 不 同 。 粗 体 的 效果 也 可 以 通过 标记 <b> 来 实现 ; 斜体 字 也 
可 以 使 用 标记 < 或 者 <cite> 表 示 。 
实例 代码 : 
<!-- 设 置 不 同 的 文字 效果 -> 
<html> 
<head> 
<title> 不 同 的 文字 样式 </title> 
</head> 
<body> 
正常 的 文字 效果 <br><br> 
<strong> 使 用 strong 标记 加 粗 文字 </strong><br> 
<b> 使 用 B 标记 加 粗 文字 </b><br><br> 
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<em> 使 用 em 标记 的 斜体 效果 </em><br> 
<|> 使 用 1 标记 的 斜体 效果 </Il><br> 
<cite> 使 用 cite 标记 的 斜体 效果 </cite><br><br> 


<u> 下 划 线 文字 效果 </u><br> 区 
</body> 正常 的 文字 效果 
tn Ee 


运行 这 段 代码 ， 可 以 看 到 不 同 的 样式 效果 ， 且 使 用 不 同 的 标 
记 也 可 以 达到 相同 的 效果 ， 如 图 3-6 所 示 。 


3.2.5 上 标 与 下 标 一 一 sup、sub 图 3-6 设置 文字 的 不 同样 式 


除了 设置 不 同 的 文字 效果 之 外 ， 有 时 候 在 网 页 中 还 需要 一 种 特殊 的 文字 效果 ， 即 上 标 和 下 标 ， 这 
在 显示 公式 时 常常 会 出 现 。 在 HTML 语言 中 ， 也 可 以 通过 标记 轻松 地 进行 设置 。 
语法 : <sup>…</sup> 上 标 标记 
<sub>*…</sub> 下 标 标记 
说 明 : 在 该 语法 中 ， 上 标 标记 和 下 标 标 记 的 使 用 方法 基本 相同 ， 只 需要 将 文字 放 在 标记 中 间 即 可 。 
实例 代码 : 
<|-- 使 用 上 标 和 下 标 一 > 
<html> 
<head> 
<title> 上 标 与 下 标的 效果 </title> 
</head> 
<body> 
正常 的 文字 效果 <br><br> 
在 方程 式 中 应 用 上 标的 效果 <br> 
X<sup>3</sup>+ 5X<sup>2</sup>-3=0<br><br> 
在 文字 中 应 用 下 标的 效果 <br> 
X<sub>1</sub>-Y<sub>2</sub>=11<br><br> 
</body> 
</html> 上 


运行 这 段 代码 ， 可 以 看 到 在 网 页 中 显示 了 上 标 与 下 标的 效 
果 ， 如 图 3-7 所 示 。 


EF 
| rT rr 


正常 的 文字 效果 
在 方程 式 中 应 用 上 标的 效果 
和 


图 3-7 设置 文字 的 上 标 与 下 标 


3.2.6 ”设置 删除 线 一 一 strike 


在 网 页 中 可 以 通过 strike 参数 对 文字 添加 删除 线 效果 。 

语法 : <strike> 文 字 </strike> 或 <s> 文 字 </s> 

说 明 : 这 两 种 标记 都 可 以 创建 删除 线 效果 ， 使 用 起 来 也 很 简单 ， 只 要 把 需要 设置 成 删除 线 效果 的 
文字 放置 在 标记 中 间 即 可 。 

实例 代码 : 

<html> 
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<head> 

<title> 文 字 的 删除 线 效果 </title> 

</head> 

<body> 
正常 的 文字 效果 <br><br> 
在 文字 上 使 用 s 标记 添加 删除 线 <br> 
<s> 文 字 的 删除 效果 </s><br><br> 
在 文字 上 使 用 strike 标记 添加 删除 线 <br> 
<strike> 文 字 的 删除 效果 </strike> 


]*“ 扣 7 省 - 同 因 全 | 间 失 要 国 收 着 天 性 提 体 ” 
ET om 


正常 的 文字 效果 
在 文字 上 使 用 标记 沃 加 昌 除 线 
交 字 的 时 除 娩 果 


在 文字 上 使 用 strikc 标 记 添加 删除 线 
交 字 的 脐 除 如 果 


[BE IE 


图 3-8 ”删除 线 效果 


3.2.7 ”等 宽 文 字 标记 一 一 code 


等 宽 文字 标记 常用 于 英文 效果 ， 使 用 该 标记 可 以 实现 网 页 中 字体 的 等 宽 效果 。 有 时 ， 使 用 等 宽 效 
果 能 够 令 页 面 显得 更 加 整齐 。 
语法 : <code> 文 字 </code> 
<samp> 文 字 </samp> 


说 明 : 在 该 语法 中 的 这 两 种 标记 都 可 以 实现 文字 的 等 宽 显 示 ， 而 在 应 用 时 只 要 把 需要 等 宽 显 示 的 
文字 放置 在 标记 中 间 即 可 。 

实例 代码 : 

<- 设 置 等 宽 文字 -> 


<html> 

<head> 

<title> 文 字 的 等 宽 效 果 </title> 

</head> 

<body> 
在 下 面 将 显示 两 段 英文 效果 ， 突 出 等 宽 文字 与 普通 英文 文字 的 对 比 效果 。<br><br> 
普通 英文 效果 <br> 
<!-- 下 面 这 段 文字 使 用 了 正常 的 效果 显示 -> 
HTML is the lingua franca for publishing hypertext on the World Wide Web.<br><br> 
等 宽 文字 效果 <br> 
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<! 一 下 面 这 段 英文 使 用 了 等 宽 文字 的 效果 显示 一 > 

<code>HTML is the lingua franca for publishing hypertext on the World Wide Web.</code><br><br> 
</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 如 图 3-9 所 示 的 效果 。 


图 3-9 等 宽 文字 的 效果 


3.2.8 空格 一 一 &nbsp; 


一 般 情况 下 ， 在 网 页 中 输入 文字 时 ， 如 果 在 段落 开始 增加 了 空格 ， 在 使 用 浏览 器 进行 浏览 时 往往 
看 不 到 这 些 空格 。 这 是 因为 在 HTML 文件 中 ， 浏 览 器 本 身 会 将 两 个 句子 之 间 的 所 有 半角 空白 仅 当 作 一 
个 来 看 待 。 如 果 需 要 保留 空格 的 效果 ， 一 般 需 要 使 用 全 角 空 格 符号 ， 或 者 通过 空格 码 来 代替 。 这 里 介 
绍 如 何 应 用 空格 码 来 输入 保留 文字 中 的 空格 效果 。 

语法 : &nbsp; 

说 明 : 在 网 页 中 可 以 有 多 个 空格 ， 一 个 &nbsp; 只 代表 一 个 半角 空格 ， 多 个 空格 则 可 以 多 次 使 用 这 
一 符号 。 

实例 代码 : 


<html> 
<head> 
<title> 输 入 空格 符号 </title> 
</head> 
<body> 
在 段落 开始 输入 空格 符号 的 效果 : <br> 
&nbsp;&nbsp;&nbsp;&nbsp; 空 格 在 网 页 排版 中 常常 应 用 到 , 使 用 空格 符号 在 文字 的 前 方 输入 几 个 空格 , 就 可 
以 实现 首 行 缩 进 的 效果 。<br><br> 
在 文字 中 间 不 使 用 空格 符号 ， 直 接 输入 6 个 半角 空格 的 效果 : <br> 
白 日 依 山 尽 ， 黄河 入 海流 。<br> 
和 欲 穷 千里 目 ， 更 上 一 层 楼 。<br><br> 
使 用 空格 符号 的 效果 : <br> 
白 日 依 山 尽 ，&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 黄 河 入 海流 。<br> 
欲 穷 千里 目 ，&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 更 上 一 层 楼 。<br> 
</body> 
</html> 
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运行 这 段 代 码 ， 可 以 清楚 地 看 到 不 管 在 两 个 句子 间 输入 多 少 个 半角 空格 ， 其 中 仅 有 一 个 半角 的 空 
格 符 会 被 接受 ， 其 余 多 出 的 空格 符 将 被 忽略 掉 。 而 输入 空格 代码 则 可 以 完整 地 保留 空格 的 效果 ， 如 


图 3-10 所 示 。 


图 3-10 在 网 页 中 输入 空格 


3.2.9 其 他 特殊 符号 


除了 空格 以 外 ， 在 网 页 的 创作 过 程 中 ,还 有 一 些 特殊 的 符号 也 需要 使 用 代码 进行 代替 。 一 般 情况 下 ， 
特殊 符号 的 代码 由 前 级 “&”、 字 符 名 称 和 后 级 “;” 组 成 。 使 用 方法 与 空格 符号 类 似 ， 具 体 见 表 3-2。 


表 3-2 ”特殊 符号 的 表示 


特殊 符号 


说 明 : 在 需要 输入 这 些 特殊 符号 的 位 置 时 ， 使 
实例 代码 : 


<html> 
<head> 
<title> 输 入 特殊 符号 </title> 
</head> 
<body> 
引号 : &quot;<br> 
左 尖 括号 : &lt;<br> 
右 尖 括号 : &gt;<br> 
乘 号 : &times;<br> 
小 节 符 号 : &sect;<br> 
版 权 所 有 的 符号 : &copy;<br> 


&times; 
Rsect; 
&copy; 
Rereg: 


&trade; 


相应 的 代码 代替 即 可 。 
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已 注册 的 符号 : &reg;<br> 
商标 符号 : &trade;<br> 


> 


了 这 段 代码 ， 可 以 看 到 如 图 3-11 所 示 的 效果 。 


四 名 入 特 下 符号 - Microsoft Internet ENGEE =19| x 
EE Ea 
] FEE ' 才 " 居 四 全 改 寺 二 国 % 要 大 如 执 人 渤 ” 
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引号 :“ | 


商标 符号 : ™w 
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图 3-11 输入 特殊 符号 
3.3 段落 标记 


在 网 页 中 如 果 要 把 文字 有 条 理 地 显示 ， 离 不 开 段落 标记 的 使 用 。 在 文本 编辑 窗口 中 ， 输 入 完 一 段 
文字 后 ， 按 下 回 车 键 后 就 生成 了 一 个 段落 。 在 HTML 中 可 以 通过 标记 实现 段落 的 效果 ， 下 面具 体 介 绍 
和 段落 相关 的 一 些 标记 。 


3.3.1 段落 标记 一 一 p 


在 HTML 语言 中 ， 段 落 通过 <p> 标 记 来 表示 。 

语法 : <p> 段 落 文字 </p> 

说 明 : 与 其 他 标记 不 同 的 是 ， 段 落 标记 可 以 没有 结束 标记 </p>， 而 每 一 个 新 的 段落 标记 的 开始 同 
时 也 意味 着 上 一 个 段落 的 结束 。 

实例 代码 : 


<html> 
<head> 
<title> 输 入 段落 文字 </title> 
</head> 
<body> 
<p> 小 镇 上 七 千 多 人 依 水 而 居 ， 镇 上 的 主要 街道 有 9 条 。 
<p> 临 河 筑 的 民房 、 黑 瓦 白 墙 ， 屋 脊 起 犯 ， 鳞 次 梢 比 ， 古 色 古 香 ， 具 有 “人 家 尽 忱 河 ， 水 巷 小 桥 多 ”的 特色 。 
</p> 
<p> 又 似 一 幅 古 雅 、 秀 丽 的 水 乡 风情 画 。</p> 
</body> 
</html> 
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运行 这 段 代 码 ， 可 以 看 到 两 种 方法 的 段落 标记 都 可 以 成 功 地 将 文字 分 段 。 效 果 如 图 3-12 所 示 。 


图 3-12 段落 效果 


3.3.2 ”取消 文字 换行 标记 一 一 nobr 


在 网 页 的 显示 过 程 中 ， 如 果 某 一 行 的 文字 宽度 过 长 ， 浏 览 器 会 自动 对 这 段 文字 进行 换行 处 理 。 如 


果 用 户 在 创作 时 不 希望 被 自动 换行 ， 则 可 以 通过 nobr 属性 来 实现 。 
语法 : <nobr> 不 换行 显示 的 文字 </nobr> 
说 明 : 在 标记 之 间 的 文字 在 显示 的 过 程 中 不 会 自动 换行 。 
实例 代码 : 
<html> 
<head> 
<title> 文 字 不 换行 显示 </title> 
</head> 


<body> 
<! 一 当 浏 览 器 宽度 不 够 时 ， 文 本 内 容 会 自动 换行 显示 --> 


<p>HTML 的 英文 全 称 是 Hyper Text Markup Language， 直 译 为 超 文 本 标记 语言 ， 它 是 全 球 广域网 上 描述 网 


页 内 容 和 外 观 的 标准 。</p> 
<! 一 下 面 这 段 文字 不 会 自动 换行 显示 ， 当 浏览 器 宽度 不 够 时 , 会 出 


pl 


现 滚动 条 -> ET 
nr EET i EE EDEL 
<p><nobr>HTML 的 英文 全 称 是 Hyper Text Markup Language， te, | 
直译 为 超 文本 标记 语言 ， 它 是 全 球 广域网 上 描述 网 页 内 容 和 外 观 的 标 ee 
准 。</nobr></p> HTML 的 英 廊 全 称 是 Hyper Text larkup Langoage， 直 译 为 由 六 本 标 
</body> 
</html> J 
三 = I 四 


运行 这 段 代码 ， 可 以 看 到 强制 文字 不 换行 的 效果 ， 如 图 3-13 
所 示 。 


3.3.3 换行 标记 一 一 br 


图 3-13 文字 不 换行 的 效果 


在 网 页 的 文字 显示 过 程 中 ， 除 了 可 以 让 文字 不 自动 换行 之 外 ， 还 可 以 使 用 <br> 标 记 将 文字 强制 换 


行 。 这 一 换行 标记 与 段落 标记 不 同 ， 段 落 标 记 的 换行 是 隔行 的 ， 而 使 用 
紧凑 。 


换行 标记 能 使 两 行 的 文字 更 加 


。40 。 
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语法 : <b 上 
说 明 : 一 个 <br> 标 记 代 表 一 个 换行 ， 关 
实例 代码 : 


<html> 
<head> 
<title> 文 字 的 换行 效果 </title> 
</head> 
<body> 
下 面 是 一 段 描写 白 龙 池 风 景 的 文字 : <br><br> 
在 建 岱 桥 北 的 溪 谷 内 是 著名 的 白 龙 池 。<br> 
相传 此 处 是 东海 龙王 的 小 儿子 小 白 龙 在 此 潜 居 镇 山 治水 。<br> 
这 里 上 有 百丈 崖 悬 流下 掷 , 似 玉龙 腾飞 ， 顺 着 峡谷 穿山 越 润 泻 


</body> 

</html> 

运行 这 段 代 码 ， 可 以 看 到 使 用 换行 标记 的 效果 ， 如 图 3-14 
所 示 。 


3.3 


.4 保留 原始 排版 方式 标记 一 一 pre 


在 网 页 创作 中 ， 


连续 的 多 个 标记 可 以 多 次 换行 。 


当 文 宁 的 换行 效果 - MicrosoftInte 
文件 SB aa Cr IRD Wh) | 
IE 2 © Dar mr Tu | 加 
bie 了 Jonpooeos mii 文人 sl tor ri DP 
下 硬是 一 段 搓 写 白 克 地 风景 的 文字 ， | 
和 人 


白 龙 池 . 
龙王 的 永生 龙 在 此 潜 寺 镇 山 治水 
县 流下 椰 ， 世 玉龙 腾飞 ， 顺 着 峡谷 穿山 相 


图 3-14 文字 的 换行 


一 般 是 通过 各 种 标记 对 文字 进行 排版 的 。 但 是 在 实际 应 用 中 ， 往 往 需要 一 些 特殊 


的 排版 效果 ， 这 样 使 用 标记 控制 起 来 会 比较 麻烦 。 解 决 的 方法 就 是 保留 文本 格式 的 排版 效果 ， 例 如 空 


格 、 


制 表 符 等 。 如 果 要 保留 原始 的 文本 排版 效果 ， 
语法 : <pre> 文 字 </pre> 


则 需要 使 用 <pre> 标 记 。 


说 明 : 在 标记 之 间 的 文字 会 保留 文档 中 的 空白 ， 按 照 原始 的 文本 格式 进行 显示 。 


实例 代码 : 
<!-- 使 用 标记 保留 文字 的 排版 效果 -> 
<html> 
<head> 
<title> 保 留 原始 排版 方式 </title> 
</head> 
<body> 
<p> 下 面 是 原始 文字 的 排版 效果 : </p> 
<pre> 
O O K K 
O O Kk KkK 
O O KK 
O O KK 
O O KK 
O O K K 
3 K K 
</pre> 
</body> 
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运行 这 段 代 码 ， 可 以 看 到 运行 效果 和 文本 中 的 效果 相同 ， 如 图 3-15 所 示 。 


名 we 


图 3-15 保留 原始 的 排版 效果 


3.3.5 ”居中 对 齐 标记 一 一 center 


对 于 段落 来 说 ， 和 普通 文字 类 似 ， 有 时 候 也 需要 将 段落 居中 。 在 HTML 语言 中 提供 了 专门 的 标记 。 
语法 : <center> 文 字 </center> 

说 明 : 在 标记 之 间 的 文字 会 自动 居中 显示 。 

实例 代码 : 


<html> 

<head> 

<title> 居 中 对 齐 </title> 

</head> 

<body> 

<center> 

<p> 春 雪 </p> 
新 年 都 未 有 芳 华 ， 二 月 初 惊 见 草 芽 。<br> 
白雪 却 嫌 春 色 晚 ， 故 穿 庭 树 作 飞花 。<br> 新 年 者 本 有 苍 华 ， 二 月 条 二 有 


见 甘 莹 。 
白 当 却 绊 春色 挽 ， 故 罕 度 桂 作 飞 花 、 


行 这 段 代码 ， 可 以 看 到 这 首 古 诗 居中 显示 ， 如 图 3-16 所 示 。 3-16 ”段落 的 居中 显示 


[eu 


3.3.6 向 右 缩 进 标记 一 一 blockquote 


使 用 <blockquote> 标 记 可 以 实现 页 面 文字 的 段落 缩 进 。 这 一 标记 也 是 每 使 用 一 次 , 段落 就 缩 进 一 次 ， 
可 以 棋 套 使 用 ， 以 达到 不 同 的 缩 进 效果 。 

语法 : <blockquote> 文 字 </blockquote> 

说 明 : 在 该 标记 之 间 的 文字 会 自动 缩 进 。 

实例 代码 : 

<html> 


<head> 


<title> 段 落 的 缩 进 效果 </title> 
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</head> 
<body> 

相传 ， 两 千 五 百年 前 ， 春 秋 时 期 的 大 音乐 家 俞 伯 牙 ， 曾 学 琴 于 程 廉 先生 ， 三 年 不 成 。 后 来 他 沿 着 孔子 的 足迹 
登 游 泰山 ， 

<blockquote> 观 东海 日 出 ， 看 云雾 变化 ，</blockquote> 

<blockquote><blockquote> 闻 松 风 长 啸 ， 听 水 涛 史 哮 ，</blockquote></blockquote> 

<blockquote><blockquote><blockquote> 拜 大 自然 为 师 ， 琴 艺 大 有 长 进 ， 
</blockquote></blockquote></blockquote> 

<blockquote><blockquote><blockquote><blockquote> 写 出 了 著名 的 古琴 曲 高 山 和 流水 。 
</blockquote></blockquote></blockquote></blockquote> 


EE 


+ 证 -一 -加 日 酝 | 雹 并 国 Wg 千 当 和光 马 -了 马 避 -四 mm 翅 芭 中 


CSETICEIEETTTZDI EE 
相仿 ， 列 千 五 百年 诗 ， 者 秋 时 期 的 大 音乐 衣 座 伯 革 ， 曾 学 浴 于 程 麻 先 生 ， 三 年 不 司 
成 。 后 来 他 褒 痢 筷子 的 足迹 登 游 蔷 山 ， 


观 东 梅 日 出 ， 看 云 雪 变化 ， 
邮 检 网 长 哆 ， 听 水 济 中 昧 ， 
天 大 自然 剂 
写 出 了 落 名 的 古 要 曲 高 山 和 流水 * 


殖 艺 大 有 长 进 ， 


司 疯 厂矿 愿 关 王 而 


图 3-17 段落 的 缩 进 效 果 
3.4 水平线 标记 


在 网 页 中 常常 看 到 一 些 水 平 线 将 段落 与 段落 之 间隔 开 ， 这 些 水 平 线 可 以 通过 插入 图 片 实现 ， 也 可 
以 更 简单 地 通过 标记 来 完成 。 


3.4.1 ”添加 水 平 线 一 一 hr 


语法 : <hr> 
说 明 : 在 网 页 中 输入 一 个 <hr> 标 记 ， 就 添加 了 一 条 默认 样式 的 水 平 线 。 
实例 代码 : 


<html> 
<head> 
<title> 添 加 水 平 线 </title> 
</head> 
<body> 
<center><h4> 泰 安 : 华夏 文明 发 祥 地 之 一 </h4></center> 
<hr> 
<p> 泰 安 是 华夏 文明 发 祥 地 之 一 。 早 在 50 万 年 前 就 有 人 类 生存 ，5 万 年 前 的 新 泰 人 已 跨 入 智 人 阶段 ， 5000 
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年 前 这 里 孕育 了 灿烂 的 大 汶 口 文化 ， 成 为 华夏 文明 史上 的 一 个 重要 里 程 碑 。</p> 
</body> 
</html> 


运行 代码 ， 可 以 看 到 在 网 页 中 出 现 了 一 条 水 平 线 ， 如 图 3-18 所 示 。 


[| 
-| 加 辐 - 目 ” 
[ISTTTTTTETET7T 可 rp 到 "| Gr 名 


素 安 。 华夏 文明 发 祥 地 之 一 


习 


于 安 是 华 丰 文 明 发 笠 册 之 一 ， 呈 在 50 瑟 年 前 歌 有 人 类 生存 ，5 万 年 的 
新 秦 人 已 举 入 居 人 阶 生 ，5000 年 前 这 里 孕育 了 灿烂 的 大 汉口 文化 ， 所 为 
华夏 文明 史上 的 一 个 重要 里 程 碎 。 


BE 


3-18 添加 水 平 线 


3.4.2 设置 水 平 线 宽度 与 高 度 属性 一 -width、height 


在 默认 情况 下 ， 在 网 页 中 插入 的 水 平 线 是 100% 的 宽度 ，1 像素 的 高 度 。 而 在 实际 创建 网 页 时 ， 可 
以 对 水 平 线 的 宽度 和 高 度 进行 设置 。 

语法 : <hr width= 水 平 线 宽度 size= 水 平 线 高 度 > 

说 明 : 在 该 语法 中 ， 水 平 线 的 宽度 值 可 以 是 确定 的 像素 值 ， 也 可 以 是 窗口 的 百分比 。 而 水 平 线 的 
高 度 值 则 只 能 够 是 像素 数 。 如 果 在 创建 水 平 线 时 只 设置 一 个 参数 ， 那 么 另外 一 个 参数 则 会 取 默 认 值 。 

实例 代码 : 


<html> 
<head> 
<title> 设 置 水 平 线 大 小 </title> 
</head> 
<body> 
<center> 
<font face=" 黑 体 " size=5> 醉 花 阴 </font> 
<hr width=130> 
<font size=4> 李 清 照 </font> 
</center> 
<hr width=85% size=3> 
<p>&nbspi&nbspi&nbspi&nbsp; 薄 雾 浓 云 愁 永 画 ， 瑞 脑 消 金 兽 。<br> 
&nbspi&nbsp;&nbsp;&nbsp; 佳 节 又 重阳 ， 玉 枕 纱 厨 ， 半 夜 凉 初 透 。<br> 
&nbsp;&nbsp;&nbsp;&nbsp; 东 离 把 酒 黄 展 后， 有 了 暗 香 盈 袖 。<br> 
&nbsp;&nbsp;&nbsp;&nbsp; 莫 道 不 消魂 ， 帘 卷 西 风 ， 人 比 黄花 瘦 。</p> 
<hr size=5> 
</body> 
</html> 
运行 这 段 代码 ， 可 以 看 到 3 条 高 度 和 宽度 不 等 的 水 平 线 效果 ， 如 图 3-19 所 示 。 
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EE 


[EE [3 


图 3-19 设置 水 平 线 宽度 和 高 度 
3.4.3 ”设置 水 平 线 的 颜色 一 一 color 


在 网 页 创作 时 ， 文 字 颜 色 是 多 姿 多 彩 的 ， 而 水 平 线 的 色彩 也 是 可 以 多 种 多 样 的。 设置 了 不 同色 彩 
的 水 平 线 可 以 为 网 页 增色 不 少 。 

语法 : <hr color=" 颜 色 代码 "> 

说 明 : 颜色 代码 是 十 六 进 制 的 数值 。 

实例 代码 : 


<html> 
<head> 
<title> 设 置 水 平 线 的 颜色 </title> 
</head> 
<body> 
<center> 
<font face=" 黑 体 " size=5 color="#FF0000"> 天 下 第 一 山 </font> 
</center> 
<hr width=220 size=3 color="#FFOOFF"> 
<p>&nbsp; &nbsp; &nbsp; &nbsp; 每 一 个 中 国人 ， 都 熟悉 这 座 丰 碑 ， 但 是 并 不 是 每 一 个 中 国人 ， 都 熟悉 这 座 
丰碑 的 基石 ， 来 自 中 国 的 哪 一 座 山 ， 人 民 英 雄 纪 念 碑 的 基石 ， 取 自 泰 山 山脉 的 花岗岩 ， 象 征 着 重 于 泰山 。<br> 
&nbsp; &nbsp; &nbsp; &nbsp; 每 一 个 中 国人 都 熟悉 这 座 大 厦 ， 但 是 并 不 是 每 一 个 中 国人 ， 都 熟悉 这 座 大 厦 的 
基石 ， 来 自 中 国 的 哪 一 座 山 ， 人 民 大 会 堂 的 基石 就 是 泰山 石 ， 象 征 着 稳 如 泰山 。</p> 
<hr size=5 color="#0000FF"> 
</body> 
</html> 


运行 这 段 代 码 ， 可 以 看 到 颜色 和 大 小 不 同 的 两 条 水 平 线 ， 而 这 两 条 水 平 线 将 文章 的 主题 映衬 得 更 
加 醒目 ， 如 图 3-20 所 示 。 


as 一 


图 3-20 设置 水 平 线 的 颜 


3.4. 


齐 ， 


果 相 
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4 ”设置 水 平 线 的 对 齐 方 于 


通过 前 面 儿 个 实例 可 以 看 到 ， 水 平 线 在 默认 情况 下 是 居中 对 齐 的 。 如 果 希 望 水 平 线 左 对 齐 或 右 对 
就 需要 使 用 align 参数 。 
语法 : <hr align= 对 齐 方式 > 
说 明 : 在 该 语法 中 对 齐 方 式 可 以 有 3 种 ， 包 括 left、center 和 right。 其 中 ，center 的 效果 与 默认 效 
同 。 
实例 代码 : 
<html> 
<head> 
<title> 设 置 水 平 线 对 齐 方 式 </title> 
</head> 
<body> 
<font face=" 黑 体 " size=5 color="#CC0000"> 醉 花 阴 </font> 


<hr width=130 color="#FF0000" align=left> 入 贡 党 水 站 线 对 万 方式 Microsoft Intermet Enplerer EE 
<p align=right><font size=4 color="#990000"> 李 清 照 </font> ! Ne EW) i) IMD Wh) 上 
了 站 i | EE EE IE: NT | 
<hr width=70 size=3 color="#FF0000" align=right></p> ey | ETITETETITTT ER 
薄 雾 浓 云 悉 永 画 ， 瑞 脑 消 金 兽 。<br> 醉 花 阴 
佳节 又 重阳 ， 玉 枕 纱 厨 ， 半 夜 凉 初 透 。<br> ede 
东 离 把 酒 黄昏 后 ， 有 暗 香 盈 袖 。<br> 李 清 息 
莫 道 不 消魂 ， 帘 卷 西风 ， 人 比 黄花 瘦 。 
<hr size=2 color="#FF0000" align=left > 活 和 
<lbody> 永吉 失忆 黄 备 后， 有 明和 
</html> Eh 消 缠 ， 市 卷 西 风 ， 人 人 比 英 秦 况 。 
运行 这 段 代码 , 可 以 看 到 3 条 不 同 效果 的 水 平 线 , 如 图 3-21 ” 理 亚 ws 
所 示 。 图 3-21 设置 水 平 线 的 对 齐 方 式 
3.4.5 ”去 掉 水 平 线 阴影 


在 默认 情况 下 ， 水 平 线 是 空心 带 阴影 的 立体 效果 ， 通 过 设置 shade 参数 可 以 将 水 平 线 的 阴影 去 掉 。 
语法 : <hr noshade> 

实例 代码 : 

<!-- 本 实例 中 进行 默认 水 平 线 和 无 阴影 水 平 线 的 对 比 一 > 


<html> 
<head> 
<title> 去 掉 水 平 线 阴影 </title> 
</head> 
<body> 
<center> 
<font face=" 黑 体 " size=5 color="#FF0000"> 泰 山 </font> 
</center> 
<hr width=130 size=4> 


“和 HTML 网 页 设计 参考 手册 


<p>&nbsp; &nbsp; 泰 山西 邻 黄河 ， 东 依 大 海 ， 峙 峨 的 雄姿 和 茂盛 的 植被 , 形成 了 地 方 性 气候 ,因此 生 云 制 雨 ， 
是 泰山 常见 的 自然 现象 。</p> 
<hr size=3 noshade> 


</body> 
</html> 
运行 代码 ， 可 以 看 到 如 图 3-22 所 示 的 效果 。 
习 去 拓 水 平 线 阳 兴 -Microsoft Internet Explorer 
上 」 文件 日 ”编辑 (E) 村 看 (V) 收 革 A) 工具 TTD) 大 Bl(d) 
|] + -二 -加 加 分 | 我 3 天 各 村 加 局 
] 屯 地 9) 个 ] 0:wboodos Htnn 理 六 全 W3tzanodhad hml 
泰山 
泰山 西 名 黄河 ， 永 依 大 海 ， 线 峨 的 磅 变 和 茂盛 的 
植被 ， 形 成 了 地 方 性 气候 ， 因 此 生 云 制 责 ， 是 泰山 常 
见 的 自然 现象 。 
图 3-22 去 掉 水 平 线 的 阴影 效果 
3.5 其 他 标记 
3.5.1 文字 标注 标记 一 一 ruby 
在 网 页 中 可 以 通过 添加 对 文字 的 标注 来 说 明 网 页 中 的 某 段 文字 。 
语法 : 
<ruby> 
被 说 明 的 文字 
<rt> 
文字 的 标注 
</rt> 
</ruby> 


说 明 : 在 这 段 代码 中 ， 被 说 明 的 文字 就 是 网 页 中 需要 添加 标注 的 那 段 文字 ， 而 文字 的 标注 则 是 真 
正 的 说 明文 字 。 
实例 代码 : 


<html> 
<head> 
<title> 添 加 文字 标注 </title> 
</head> 
<body> 
<center> 
<ruby> 
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<font face=" 黑 体 " size=5 color="#FF0000"> 天 下 第 一 山 </font> 
<rt> 
<font color="#660000"> 泰 山 </font> 
</rt> 
</ruby> 
</center> 
<p>&nbsp; &nbsp; 泰山 周围 先后 发 现 了 新 石器 时 代 八 千 五 百年 前 的 后 李 文 化 ， 七 千年 前 的 北 辛 文化 ， 六 千 
年 左右 的 大 汶 口 文化 ， 四 千年 左右 的 龙山 文化 和 三 千年 左右 的 岳 石 文化 。 星 罗 棋 布 的 古文 化 遗址 ， 就 像 群星 拱北 
斗 一 样 ， 在 泰山 周围 绕 了 一 个 巨大 的 海 岱 文化 圈 。</p> 
<hr size=3 noshade> 
</body> 
</html> 


运行 这 段 代码 ， 可 以 在 文章 的 标题 上 面 看 到 标注 文字 “泰山 ”， 如 图 3-23 所 示 。 在 默认 情况 下 ， 
标注 文字 很 小 ， 但 是 在 HTML 中 也 可 以 像 设置 其 他 文字 一 样 调整 标注 文字 的 各 种 属性 ， 包 括 大 小 、 颜 
色 等 。 


3 添加 文字 标注 - Microsoft I... 区 | 回国 

文件 (E) 编辑 (E) 查看 (V) 收藏 (6) 工具 (TD) 帮 肚 ” 避 

«| ED 交 时 天 如” 

地 址 四) | 各 C:\Documents and Settings\st 加 | 回转 到 链接 ” 
人 二 
天 下 第 一 山 

到 册 册 图 兴 后 发 现 了 新 克昌 对 从 人 下 天 全 于 的 后 过 六 
半生 的 大 汶 


2 机 在 泰山 夺 图 纤 了 一 个 巨大 


BE 车 我 的 电脑 


图 3-23 添加 标注 文字 


3.5.2 ”声明 变量 标记 一 一 var 


在 使 用 网 页 讲解 某 些 知识 时 ， 为 了 统一 地 突出 变量 ， 常 常 将 其 设置 为 斜体 。 而 在 HTML 中 也 提供 
了 一 种 标记 ， 用 于 专门 设置 变量 的 效果 。 

语法 : <var> 变 量 </var> 

说 明 : 在 标记 之 间 的 文字 就 以 声明 变量 的 效果 显示 。 

实例 代码 : 


<html> 
<head> 
<title> 添 加 文字 标注 </title> 
</head> 
<body> 
<p> 定 义 变量 就 是 给 变量 赋值 。 定 义 变量 的 格式 为 :<br> 
变量 名 := 数值 或 者 表达 式 的 值 <br> 
其 中 符号 “:=” 是 定义 符 ， 或 者 称 为 赋值 符 。<br> 
<p> 例 如 定义 变量 <var>y</var> 的 值 为 <var> x + 5 </var>， 可 以 表示 为 : 
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<var>y</var> := <var>x</var> + 5 
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</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 如 图 3-24 所 示 的 效果 。 


图 3-24 声明 变量 


3.5.3 忽视 HTML 标签 标 i 


xmp 


忽视 HTML 标签 标记 主要 是 用 来 使 HTML 标签 失去 作用 ， 而 直接 显示 在 页 面 中 。 这 一 标记 在 实际 
中 应 用 并 不 多 

语法 : <plaintext> 或 <xmp> 

说 明 : 这 两 个 标记 中 的 任何 一 个 如 果 加 入 到 HTML 代码 中 ， 都 会 使 HTML 标记 失去 作用 ， 一 般 放 
置 在 <body> 标 记 之 后 。 

实例 代码 : 


<html> 
<head> 
<title> 忽 视 HTML 标签 标记 </title> 
</head> 
<body> 
<plaintext> 
<! 一 当 浏 览 器 宽度 不 够 的 时 候 ， 文 本 内 容 会 自动 换行 显示 --> 
<p>HTML 的 英文 全 称 是 Hyper Text Markup Language， 直 译 为 超 文本 标记 语言 ， 它 是 全 球 广域网 上 描述 网 
页 内 容 和 外 观 的 标准 。</p> 
<!-- 下 面 这 段 文字 不 会 自动 换行 显示 ， 当 浏览 器 宽度 不 够 的 时 候 ， 会 出 现 滚动 条 --> 
<p><nobr>HTML 的 英文 全 称 是 HyperText Markup Language, 直译 为 超 文本 标记 语言 ， 它 是 全 球 广域网 上 
描述 网 页 内 容 和 外 观 的 标准 。</nobr></p> 


运行 程序 的 效果 如 图 3-25 所 示 。 
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3-25 忽略 HTML 标签 的 作用 
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列 ” 雪 


WD 无 序列 表 的 玛 于 
WP ”有 序列 表 的 到 于 
P| 定义 列表 标记 
六 ”菜单 列表 标记 
由 由 录 丈 胡 一 一 dir 
六 列表 的 高 级 应 用 
六 列表 的 欲 套 


dl 


menu 


列表 (List) 是 一 种 非常 实用 的 数据 排列 方式 ， 它 以 条 列 式 的 模式 来 显示 数 
据 , 使 读者 能 够 一 日 了 然 。 在 HTML 中 有 3 种 列表 , 分别 是 无 序列 表 (Unordered 
Lists)、 有 序列 表 (Ordered Lists) 和 定义 列表 (Definition Lists)。 
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4.1 无 序列 表 的 设计 


4.1.1 无 序列 表 标记 一 一 ul 


无 序列 表 的 特征 在 于 提供 一 种 不 编号 的 列表 方式 , 而 在 每 一 个 项 目 文字 之 前 ， 以 符号 作为 分 项 标识 。 
语法 
<ul> 
<LP 第 1 项 
<LE 第 2 项 
<LE> 第 3 项 
</ul> 
说 明 : 在 该 语法 中 ， 使 用 <ul></ul> 标 记 表 示 这 一 个 无 序列 表 的 开始 和 结束 ， 而 <LZ> 则 表示 这 是 一 
个 列表 项 的 开始 。 在 一 个 无 序列 表 中 可 以 包含 多 个 列表 项 。 


实例 代码 : 
<html> 
<head> 
<title> 创 建 无 序列 表 </title> 
</head> 
<body> 
<font size=5 color="#990000"> 提 供 下 载 的 软件 类 别 : </font><br><br> 
<ul> 
<LI> 系 统 程序 
<LI> 媒 体 工具 
<LI> 管 理 软件 
<LI> 游 戏 娱乐 
</ul> 
</body> 
</html> 
运行 这 段 代码 ， 可 以 看 到 窗口 中 建立 了 一 个 无 序列 表 ， 该 列表 共 包 含 了 4 个 列表 项 ， 如 图 4-1 所 示 。 
EE 
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提供 下 载 的 软件 类 别 : 
系统 程序 
车 体 工具 
次 棕 软 件 
戏 娱 乐 
到 
EE | a 


图 4-1 创建 无 序列 表 
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4.1.2 设置 无 序列 表 的 符号 类 型 一 一 type 


默认 情况 下 ， 无 序列 表 的 项 目 符号 是 @@， 而 通过 type 参数 可 以 调整 无 序列 表 的 项 目 符号 ， 避 免 列 
表 符 号 的 单调 。 
语法 ， 
<ul type= 符 号 类 型 > 
<LLE> 第 1 项 
<LE 第 2 项 
<LE 第 3 项 


</ul> 
说 明 : 在 该 语法 中 ， 无 序列 表 其 他 的 属性 不 变 ，type 属性 则 决定 了 列表 项 开始 的 符号 。 它 可 以 设 
置 的 值 有 3 个 ， 见 表 4-1。 其 中 disc 是 默认 的 属性 值 。 


表 4-1 无 序列 表 的 符号 类 型 


列表 项 目的 符号 


实例 代码 : 


<html> 
<head> 
<title> 创 建 无 序列 表 </title> 
</head> 
<body> 
<font size=5 color="#990000"> 出 售 的 图 书 种 类 : </font><br><br> 
<ul type=circle> 
<LI> 计 算 机 类 书籍 
<LI> 休 闲 杂志 类 书籍 
<LI> 考 试 教材 类 书籍 
<LI> 社 会 科学 类 书籍 
<LI> 外 语 原版 书 
</ul> 
<hr color="#CC0000" size=2> 
<font size=5 color="#990000"> 出 售 的 数码 产品 种 类 : </font><br><br> 
<ultype=square> 
<LI> 电 脑 配件 
<LI> 数 码 相机 
<LI> 手 机 
<LI>MP3 
</ul> 
</body> 
</html> 
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运行 这 段 代 码 ， 可 以 看 到 除了 默认 的 列表 项 符号 之 外 ， 显 示 了 另外 两 种 列表 项 目 符号 的 效果 ， 如 


图 4-2 所 示 。 
无 序列 表 的 类 型 定义 也 可 以 在 <LI> 项 中 , 其 语法 是 <LI type= 符 号 类 型 >, 这 样 定义 的 结果 是 对 单个 


项 目 进 行 定义 ， 实 例 代 码 如 下 : 


<html> 
<head> 
<title> 不 同 的 项 目 符号 </title> 
</head> 
<body> 
<font size=5 color="#990000"> 出 售 的 图 书 种 类 : </font><br><br> 
<Ul> 
<LItype=disc > 计算 机 类 书籍 
<LI type=circle> 休 闲 杂志 类 书籍 
<Ll type=square > 社会 科学 类 书籍 
</ul> 
</body> 
</html> 


运行 这 段 代码 ， 效 果 如 图 4-3 所 示 。 


他 委 太 厅 列表 Microsoft Internet Explorer 
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图 4-2 设置 无 序列 表 项 目 符号 图 4-3 设置 不 同 的 项 目 符号 


4.2 有 序列 表 的 设计 


4.2.1 有 序列 表 标 记 一 一 ol 


有 序列 表 中 ， 各 个 列表 项 使 用 编号 而 不 是 符号 来 进行 排列 。 列 表 中 的 项 目 通常 都 有 先后 顺序 性 ， 
一 般 采 用 数字 或 者 字母 作为 顺序 号 。 
<ol> 
<LE 第 1 项 
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<LE 第 2 项 
<LE 第 3 项 


</ol> 
说 明 : 在 该 语法 中 ，<ol> 和 </ol> 标 记 标志 着 有 序列 表 的 开始 和 结束 ， 而 <LI> 标 记 表 示 这 是 一 个 列 
表 项 的 开始 ， 默 认 情 况 下 ， 采 用 数字 序号 进行 排列 。 
实例 代码 : 


<html> 
<head> 
<title> 创 建 有 序列 表 </title> 
</head> 
<body> 
<font size=5 color="#990000"> 创 建 HTML 文件 的 步骤 : </font><br><br> 
<ol> 
<LI> 启 动 编写 HTML 文件 的 软件 ， 如 Dreamweaver 
<LI> 编 写 文 件 代 码 
<LI> 保 存 文件 日志 
<LI> 运 行文 件 并 查看 效果 Es TEST TE 到 
</ol> 创建 HTML 文 件 的 步 双 C: 刘 
</body> 1 IL 次 件 的 软件 ，#Drearneaver 
</html> 


运行 这 段 代 码 ， 可 以 看 到 序列 前 面包 含 了 顺序 号 ， 如 
图 4-4 所 示 。 BE mm 
图 4-4 有 序列 表 


4.2.2 ”有 序列 表 的 序号 类 型 一 type 


默认 情况 下 ， 有 序列 表 的 序号 是 数字 的 ， 通 过 type 属性 可 以 调整 序号 的 类 型 ， 例 如 将 其 修改 成 字 
语法 : 
<ol type= 序 号 类 型 > 
<LI> 第 1 项 
<LI> 第 2 项 
<LI> 第 3 项 
</ol> 


说 明 : 在 该 语法 中 ， 序 号 类 型 可 以 有 5 种 ， 见 表 4-2。 
表 4-2 有 序列 表 的 序号 类 型 
列表 项 目的 序号 类 型 
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pe 了 入 列表 项 目的 序号 类 型 
~ 大 写 英文 字母 A，B,C，D…… 
I 小 写 罗马 数字 i，ii， 诈 ，iv…… 
4 大 写 罗 马 数字 I，II，IIUT，IV……- 
实例 代码 : 
<html> 
<head> 
<title> 创 建 有 序列 表 </title> 
</head> 
<body> 


<font size=4 color="#990000"> 小 小 蚂蚁 测试 你 如 何 面 对 人 际 关 系 </font><br><br> 
你 和 朋友 约 好 一 起 逛街 ， 可 是 你 的 朋友 迟到 了 。 于 是 你 就 开始 在 地 上 乱 画 。 突 然 ， 你 发 现 有 很 多 蚂蚁 正 在 成 
群 结 队 地 往 前 行进 。 你 认为 这 些 蚂 蚁 正在 做 什么 ? 
<oltype=A> 
<LI> 正 在 搬家 
<LI> 大 家 正 要 前 往 救助 掉 落 洞穴 中 的 伙伴 
<LI> 发 现 好 吃 的 食物 ， 大 家 正 要 去 搬运 
<LI> 正 要 去 效 击 侵入 它们 势力 范围 的 敌人 
</ol> 
<hr size=2 color="#CC0000"> 
<font size=4 color="#990000"> 走 路 姿势 透露 你 的 另 一 面 </font><br><br> 
走路 是 我 们 每 天 都 要 做 的 事情 ， 似 乎 就 像 我 们 呼吸 空气 一 样 平常 ， 走 路 会 藏 有 什么 辫 机 昵 ?其 实 ， 这 里 面 的 
奥妙 可 大 着 呢 ! 每 个 人 有 每 个 人 的 习惯 ， 由 此 ， 我 们 每 个 人 走路 的 姿态 就 会 有 所 不 同 ， 就 在 这 不 同 的 姿势 中 ， 你 
的 性 格 特征 以 及 爱情 玄机 就 一 点 一 滴 地 泄露 出 
来 了 哟 ! 
<oltype=i> 
<LI> 走 路 的 时 候 速度 比较 快 , 通常 五 
指 伸 得 笔直 
<LI> 走 路 时 的 速度 一 般 , 手掌 常 自然 
地 握 成 拳 状 
<LI> 常 将 一 只 手 插 进口 袋 , 或 两 手 同 
时 插 进 口袋 
<LI> 走 路 的 时 候 速度 比较 慢 , 五 指 自 
然 微微 弯曲 
</ol> 
</body> 
</html> 


运行 这 段 代码 ， 可 以 实现 有 序列 表 的 不 图 4.5 有 序列 表 的 类 开 
同类 型 的 序号 排列 ， 如 图 4-5 所 示 。 


了 什么 玄机 H 旧 1 其实， 这 里 面 
同 ， 就 在 这 不 同 的 次 


3 


4.2.3 ”有 序列 表 的 起 始 数 值 一 一 start 


默认 情况 下 ， 有 序列 表 的 列表 项 是 从 数字 1 开始 的 ， 通 过 start 参数 可 以 调整 起 始 数值 。 这 个 数值 
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可 以 对 数字 起 作用 ， 也 可 以 作用 于 英文 字母 或 者 罗马 数字 。 
语法 
<ol start= 起 始 数 值 > 
<LE 第 1 项 
<LB> 第 2 项 
<LE 第 3 项 


</ol> 
说 明 : 在 该 语法 中 ， 起 始 数值 只 能 是 数字 ， 但 是 同样 可 以 对 字母 和 罗马 数字 起 作用 。 
实例 代码 : 


<html> 
<head> 
<title> 有 序列 表 的 起 始 值 </title> 
</head> 
<body> 
<font size=4 color="#990000"> 这 些 动物 都 是 国家 保护 动物 : </font><br><br> 
<ol start=3> 
<LI> 大 熊猫 
<LI> 金 丝 猴 
<LI> 娃 娃 鱼 
<LI> 变 色 龙 
</ol> 
<hr size=2 color="#CC0000"> 
<font size=4 color="#990000"> 读 完 本 期 故事 会 ， 选 择 您 认为 最 好 的 一 篇 文章 : </font><br><br> 


<ol type=A start=5> 


<LI> 晴 天 、 雨 天 
<LI> 我 长 大 了 
<LI> 风 中 的 百合 花 
</ol> 
</body> 
</html> 
运行 这 段 代码 ， 效 果 如 图 4-6 所 示 ， 其 中 定义 了 不 同 的 起 始 编号 。 
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图 4-6 设置 有 序列 表 的 起 始 编 号 
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4.3 定义 列表 标记 一 一 dl 


在 HTML 中 还 有 一 种 列表 标记 ， 称 为 定义 列表 (Definition Lists) 。 不 同 于 前 两 种 列表 ， 它 主要 用 
于 解释 名 词 ， 包 含 两 个 层次 的 列表 ， 第 一 层次 是 需要 解释 的 名 词 ， 第 二 层次 是 具体 的 解释 。 
语法 : 
<dl> 
<dt> 名 词 1<dd> 解 释 1 
<dt> 名 词 2<dd> 解 释 2 
<d 户 名词 3<dd> 解 释 3 


</dl> 
说 明 : 在 该 语法 中 ，<dl> 标 记 和 </dl> 标 记分 别 定义 了 定义 列表 的 开始 和 结束 ，<dt> 后 面 就 是 要 解 
释 的 名 称 ， 而 在 <dd> 后 面 则 添加 该 名 词 的 具体 解释 。 作 为 解释 的 内 容 在 显示 时 会 自动 缩 进 ， 有 些 像 字 
典 中 的 词语 解释 。 
实例 代码 : 


<html> 
<head> 
<title> 创 建 定义 列表 </title> 
</head> 
<body> 
<font size=5 color="#000099"> 网 页 创作 的 相关 知识 :</font><br><br> 
<dl> 
<dt>HTML<dd>HTML 是 英文 Hyper Text Markup Language 的 缩写 ， 即 超 文本 标志 语言 
<dt>CSS<dd>CSS 是 Cascading Style Sheets( 层 荆 样 式 表单 ) 的 简称 ， 一 种 设计 网 页 样式 的 工具 
<dt>JavaScript<dd>JavaScript 是 一 种 新 的 描述 语言 ， 可 以 被 嵌入 HTML 的 文件 之 中 
<dt>CGI<dd>CGI 是 一 段 程序 ， 它 运行 在 Server 上 ， 提 供 同 客户 端 HTML 页 面 的 接口 
</dl> 
</body> 
</html> 


运行 这 段 代码 ， 可 以 实现 如 图 4-7 所 示 的 定义 列表 效果 。 


4-7 定义 列表 
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4.4 菜单 列表 标记 一 一 menu 


菜单 列表 主要 用 于 设计 单列 的 菜单 列表 。 菜 单列 表 在 浏览 器 中 的 显示 效果 和 无 序列 表 是 相同 的 ， 
因此 它 的 功能 也 可 以 通过 无 序列 表 来 实现 。 
语法 : 
<menu> 
<LP 列 表 项 1 
<L 户 列表 项 2 
<L> 列 表 项 3 


</menu> 
说 明 : 在 该 语法 中 ，<menu> 和 </menu> 标 志 着 菜单 列表 的 开始 和 结束 。 
实例 代码 : 


<html> 

<head> 

<title> 创 建 菜单 列表 </title> 
</head> 

<body> 


<font size=5 color="#000066"> 本 章 中 介绍 的 列表 主要 包 rr 
插 : </font><br><br> Ee 
<menu> l | 国 SR 兴 W 人 
<LI> 无 序列 表 Mk) [e) ovockos tenn tt oormenu hen | Ds 
<LI> 有 序列 表 本 章 中 介绍 的 列表 主要 包括 ， 
<LI> 定 义 列表 。 无 序 9 表 
<LI> 菜 单列 表 :又 
<LI> 目 录 列 表 : 本 续 
</menu> 
</body> 到 
i [E23 |] 加 


运行 这 段 代码 ， 效 果 如 图 4-8 所 示 。 图 4-8 菜单 列表 的 效果 


4.5 目录 列表 dir 
目录 列表 一 般 用 来 创建 多 列 的 目录 列表 ， 它 在 浏览 器 中 的 显示 效果 与 无 序列 表 相 同 ， 因 此 它 的 功 
能 也 可 以 通过 无 序列 表 来 实现 。 
语法 : 
<dir> 
<LP 列 表 项 1 
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<L 户 列表 项 2 
<L 列 表 项 3 
</dir> 
说 明 : 在 该 语法 中 ，<menu> 和 </menu> 标 志 着 菜单 列表 的 开始 和 结束 。 
实例 代码 : 
<html> 
<head> 
<title> 创 建 目录 列表 </title> 
</head> 当 创 建 目 录 列表 - Microsoft Internet Explorer lalxl 
<body> 」 文 作品。 编辑 四。 查看 W。 收藏。 工具 (D 帮助 td | 
<font size=5 color="#000066"> 禅 </font><br><br> + -7 -OD | OF RR 人 | *” 
i | 吴 二 (@ | 关 ] obooaoe Hemh 主 文件 bsoedr hem 可 ee 到 
<LI> 诸 恶 不 作 ， 众 善 奉行 禅 站 
<LI> 人 间 万 事 塞 翁 马 
<LI> 一 切 众生 希 有 佛 性 : 和 
<LI> 面 面 佛 面 行 行 佛 行 : 柄 错 闻 从 
</dir> 
</body> 国 加 加 
</html> [SE | 加 局 
运行 这 段 代 码 ， 效 果 如 图 4-9 所 示 。 图 49 月 未 列 类 


4.6 列表 的 高 级 应 用 
4.6.1 列表 的 简化 


当 制作 的 列表 清单 过 长 时 ， 浏 览 器 可 能 需要 利用 滚动 条 才能 看 到 所 有 的 内 容 。 为 了 节省 空间 ， 避 
免 过 多 的 留 白 ， 可 以 考虑 利用 compact 参数 来 紧密 排列 各 要 项 的 内 容 。 

语法 : <dl compact></dl> 

说 明 : 在 该 语法 中 ，compact 参数 除了 与 定义 列表 结合 之 外 ， 还 可 以 与 各 种 列表 结合 使 用 ， 达 到 列 
表 的 简化 功能 。 

实例 代码 : 


<html> 
<head> 
<title> 创 建 定义 列表 </title> 
</head> 
<body> 
<font size=5 color="#000099"> 网 页 创作 的 相关 知识 :</font><br><br> 
<dl compact> 
<dt>HTML<dd>HTML 是 英文 Hyper Text Markup Language 的 缩写 ， 即 超 文本 标志 语言 
<dt>CSS<dd>CSS 是 Cascading Style Sheets〔 层 又 样式 表单 ) 的 简称 ， 是 一 种 设计 网 页 样式 的 工具 
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<dt>CGI<dd>CGI 是 一 段 程序 ， 它 运行 在 Server 上 ， 提 供 同 客户 端 HTMI 页 面 的 接口 
</dl> 


</body> 
</html> 


运行 这 段 代码 , 与 本 章 4.3 节 的 实例 相对 比 ,可 以 看 到 解释 内 容 没 有 单独 开始 一 行 , 而 是 直接 在 词 
语 后 面 ， 从 而 节省 了 空间 ， 如 图 4-10 所 示 。 


汝 创建 定义 列表 - icrosoft Internet Explorer 
ETTEICTIEETIIETIEECIECTII 

© SC CRP en = MIO 
地 址 四 | 禹 C: boemments and 5ettines\servar\ 虹 而 \4-10.htal 


更 双 息 -| 及 SE 


网 页 创作 的 想 关 知识 : 


HTIL HTIL 是 英文 Hyper Text Jarkup Language 的 缩写 ， 即 超 文 本 标志 语言 
CS8 “CSS 是 Caacading Style Sheets( 居 亚 样式 表单 ) 的 简称 ， 是 一 种 设计 网 页 样式 的 工具 
C6I C6I 是 一 段 程序 ， 它 运行 在 Server 上 ， 提 供 同 客户 端 HTIL 页 面 的 接口 


图 4-10 简化 列表 
4.6.2 设置 列表 文字 的 颜色 


在 创建 列表 时 ， 可 以 单独 控制 列表 中 文字 的 颜色 。 在 这 里 可 以 直接 对 文字 进行 颜色 设置 。 

语法 : <LI><font color=" 颜 色 代 人 码 "> 列表 项 的 内 容 </font><LI> 

说 明 : 在 该 语法 中 ， 列 表 项 内 容 的 颜色 就 变 成 了 设置 后 的 颜色 。 也 可 以 在 列表 中 进行 整体 颜色 的 
实例 代码 : 


<html> 
<head> 
<title> 设 置 列表 文字 的 颜色 </title> 
</head> 
<body> 
<font size=5 color="#990000"> 文 学 世界 : </font><br><br> 
<ul><font color="#CC0000"> 
<LI> 散 文 精 选 </LI> 
<LI> 小 说 天 地 </LI> 
<LI> 诗 词 歌 赋 </LI> 
</font> 
</ul> 
<hr size=2 color="#CC0000"> 
<font size=5 color="#000099"> 散 文 精 选 :</font><br><br> 
<ul> 


<LI><font color="#996600"> 光 阴 的 故事 </font></LI> 
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<LI><font color="#3366FF"> 菁 靖 校 园 情 </font></LI> 
<LI><font color="#CC0099"> 漫 漫 旅途 路 </font></LI> 


</ul> 
</body> 
</html> 
运行 这 段 代码 ， 效 果 如 图 4-11 所 示 。 
iE 
EE 
+ -+- 同 加 孝公 wR 知 渤 纪 - 己 ?| 
HD) [Es wotieo em tetr rin EE 
习 | 
文学 世界 : 


三 一 可 


图 4-11 设置 列表 文字 的 颜色 


4.7 列表 的 详 套 


最 常见 的 列表 嵌 套 模式 就 是 有 序列 表 和 无 序列 表 的 嵌 套 ,可 以 重复 地 使 用 <ol> 和 <ul> 标 记 组 合 实现 。 
实例 代码 : 


<html> 
<head> 
<title> 创 建 有 序列 表 </title> 
</head> 
<body> 
<ultype=square> 
<LI><font size=5 color="#990000"> 探 测 你 的 恋爱 冒险 心 : </font><br> 
假设 你 想 要 让 喜欢 的 他 (她 ) 有 脸红 心跳 的 感觉 ， 所 以 打算 穿 一 件 白 色 的 裙子 (裤子 ) ， 不 过 上 半身 却 
不 知道 要 配 什么 才 好 ， 于 是 你 跑 到 商场 买 了 一 件 今年 最 流行 的 条 纹 T-shirt， 你 会 选择 以 下 哪 种 款式 的 上 衣 呢 ? 
<br><br> 
<oltype=A> 
<LI> 运 动 衫 
<LI> 套 头 衫 
<LI>V 领 休闲 衫 
<LI> 带 帽 衫 
</ol> 
</LI><br> 
<LI><font size=5 color="#990000"> 选 鬼屋 看 你 适合 什么 工作 : </font><br> 
你 在 旅行 时 不 小 心 在 荒山 野 岭 过 了 路 ， 这 时 天 色 已 晚 ， 你 发 觉 附近 只 有 一 间 小 屋子 ， 逼 不 得 已 只 好 向 主 
人 借 宿 ， 可 是 屋 主 老夫 妇 却 告诉 你 屋子 的 四 个 房间 都 闹鬼 ， 一 定 要 住 下 来 的 情况 下 ， 你 会 选择 哪个 房间 呢 ? 
<br><br> 
<oltype=A > 
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<LI> 有 个 人 头 从 窗外 恶狠狠 睡 着 你 睡觉 的 房间 
<LI> 厕 所 会 传 来 开关 门 声 和 女人 叹息 声 的 房间 
<LI> 你 一 身上 去 床 就 开始 摇晃 不 让 你 睡 的 房间 
<LI> 半 和 夜 醒 来 看 到 一 个 无 头 鬼 坐 在 床 边 的 房间 
</ol> 
</LI> 
</ul> 
</body> 
</html> 


了 这 段 代码 ， 效 果 如 图 4-12 所 示 。 


> 


[et 


沪 衣 理 有 订 列表 -icrosoft Intorner Esplorer 
ET 


Yess © DS 


图 4-12 列表 的 医 套 


。61 。 


第 章 
超 链接 


”起 链接 基本 知 还 
由 超 链接 的 建 云 
由” 内 部 链接 

六 ”书签 链接 

由 外 部 链接 


所 谓 超 链接 就 是 当 单 击 某 个 字 或 某 个 图 片 时 , 就 可 以 打开 另外 一 个 画面 。 它 
的 作用 对 网 页 来 说 相当 重要 , 如 果 没 有 它 , 那 便 只 能 在 每 打开 一 个 页 面 时 就 要 在 
地 址 栏 内 输入 一 次 地 址 了 。 
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5.1 超 链接 基本 知识 


5.1.1 超 链接 


对 于 初次 接触 网 页 设计 的 读者 来 说 ， 可 能 对 于 超 链 接 的 概念 还 不 是 很 明白 。 超 链接 就 是 从 一 个 网 
页 转 到 另 一 个 网 页 的 途径 。 

超 链接 是 网 页 的 重要 组 成 部 分 。 如 果 说 文字 、 图 片 是 网 站 的 撕 体 ， 那 么 超 链接 就 是 整个 网 站 的 神 
经 细胞 ， 它 把 整个 网 站 的 信息 有 机 地 结合 到 一 起 。 链 接 能 使 浏览 者 从 一 个 页 面 跳 转 到 另 一 个 页 面 ， 实 
现 文档 互联 、 网 站 互联 。 

超 文本 链接 (hypertextlink) 通常 简称 为 超 链接 (hyperlink) ， 或 者 简称 为 链接 (link) 。 链 接 是 
HTML 的 一 个 最 强大 和 最 有 价值 的 功能 。 链 接 是 指 文档 中 的 文字 或 者 图 像 与 男 一 个 文档 、 文 档 的 一 部 
分 或 者 一 幅 图 像 链接 在 一 起 。 


5.1.2 绝对 路 径 


绝对 路 径 就 是 主页 上 的 文件 或 目录 在 硬盘 上 的 真正 路 径 。 使 用 绝对 路 径 定位 链接 目标 文件 比较 清 
晰 ， 但 是 有 两 个 缺点 : 一 是 需要 输入 更 多 的 内 容 ， 二 是 如 果 该 文件 被 移动 了 ， 就 需要 重新 设置 所 有 的 
相关 链接 。 例 如 在 本 地 测试 网 页 时 链接 全 部 可 用 ， 但 是 到 了 网 上 就 不 可 用 了 。 这 就 是 路 径 设置 的 问题 。 
例如 设置 路 径 为 “C:\Program files\l.htm”， 在 本 地 确实 可 以 找到 ， 但 是 到 了 网 站 上 该 文件 便 不 一 定 在 
这 个 路 径 下 了 ， 所 以 就 会 出 问题 。 


5.1.3 ”相对 路 径 


首先 分 析 一 下 为 什么 会 发 生 图 片 不 能 正常 显示 的 情况 。 举 一 个 例子 ， 现 在 有 一 个 页 面 index.htm， 
在 这 个 页 面 中 链接 有 一 张 图 片 photo.jpg， 它 们 的 绝对 路 径 如 下 : 

c:\website\index.htm 

c:\website\img\photo.jpg 

如 果 使 用 绝对 路 径 c:vwebsite\img\photo.jpg， 那 么 在 自己 的 计算 机 上 将 一 切 正常 。 因 为 确实 可 以 在 
指定 的 位 置 ( 即 cvwebsite\img\photo.jpg) 上 找到 photo.jpg 文件 。 但 是 当 将 页 面 上 传 到 网 站 时 就 很 可 能 
会 出 错 了 ， 因 为 网 站 可 能 在 服务 器 的 c 盘 ， 也 可 能 在 d 盘 ， 也 可 能 在 aa 目录 下 ， 更 可 能 在 bb 目录 下 ， 
也 就 是 说 很 有 可 能 不 存在 c:\website\img\photo.jpg 这 样 一 个 路 径 。 此 时 就 用 到 相对 路 径 。 所 谓 相 对 路 径 ， 
顾名思义 就 是 自己 相对 于 目标 位 置 。 在 上 例 的 index.htm 中 链接 的 photo.jpg 可 以 使 用 img\photo.jpg 来 
定位 文件 ， 那 么 不 论 将 这 些 文件 放 到 哪里 ， 只 要 它们 的 相对 关系 没有 变 ， 就 不 会 出 错 。 

在 编程 中 使 用 “.\” 来 表示 上 一 级 目录 ，“.\.\” 表 示 上 上 级 的 目录 ， 以 此 类 推 。 再 看 儿 个 例子 ， 
注意 所 有 例子 中 都 是 index.htm 文件 中 链接 有 一 张 图 片 photo.jpg。 

看 下 面 这 个 例子 : 


c:\website\web\index.htm 

c:\website\img\photo.jpg 

在 此 例 中 ，index.htm 中 链接 的 photojpg 应 该 怎样 表示 呢 ? 

错误 写法 : img\photo.jpg, 这 种 写法 是 不 正确 的 。 在 此 例 中 , 对 于 index.htm 文件 来 说 , img\photo.jpg 
所 代表 的 绝对 路 径 是 ci\website\Wweb\img\photo.jpg， 显 然 不 符合 要 求 。 

正确 写法 : 使 用 .\img\photo.jpg 的 相对 路 径 来 定位 文件 。 

总 结 一 下 ， 对 于 相对 路 径 来 说 ， 设 置 起 来 一 般 有 如 下 3 种 写法 : 

口 同一 目录 下 的 文件 ， 只 需要 输入 链接 文件 的 名 称 即 可 ， 如 01.html。 

口 上 一 级 目录 中 的 文件 ， 在 目录 名 和 文件 名 之 前 加 入 “../”， 如 ../04/02.html; 如 果 是 上 两 级 ， 

则 需要 加 入 两 个 “../”， 如 ../../file/01.html。 

口 下 一 级 目录 : 输入 目录 名 和 文件 名 ， 之 间 以 “/” 隔 开 ， 如 : Html/05/01.html。 

除了 绝对 路 径 和 相对 路 径 之 外 ， 还 有 一 种 称 为 根 目录 。 根 目录 常常 在 大 规模 站 点 需要 放置 在 儿 个 

服务 器 上 , 或 者 一 个 服务 器 上 同时 放置 多 个 站 点 时 使 用 。 其 书写 形式 很 简单 ， 只 需要 以 “/” 开 始 ， 

表示 根 目录 ， 之 后 是 文件 所 在 的 目录 名 和 文件 名 。 


5.2” 超 链接 的 建立 


5.2.1 超 链接 标记 的 基本 语法 


超级 链接 的 语法 根据 其 链接 对 象 的 不 同 而 有 所 变化 ， 但 都 是 基于 <A> 标 记 的 。 

语法 : <A hre 伟 "文件 名 "> 链接 元 素 </A> 或 <A href="URL'> 链 接 元 素 </A> 

说 明 : 在 该 语法 中 ， 链 接 元 素 可 以 是 文字 ， 也 可 以 是 图 片 或 其 他 页 面 元 素 。 其 中 href 是 hypertext 
reference 的 缩写 。 通 过 超级 链接 的 方式 可 以 使 各 个 网 页 之 间 链 接 起 来 ， 使 网 站 中 众多 的 页 面 构成 一 个 有 
机 整体 ， 使 访问 者 能 够 在 各 个 页 面 之 间 跳 转 。 超 级 链接 可 以 是 一 段 文 本 、 一 幅 图 像 或 其 他 网 页 元 素 ， 当 
在 浏览 器 中 用 鼠标 单 击 这 些 对 象 时 ， 浏 览 器 可 以 根据 指示 载 入 一 个 新 的 页 面 或 者 转 到 页 面 的 其 他 位 置 。 

下 面具 体 讲解 各 种 超 链接 的 创建 方法 。 


5.2.2 ”建立 文本 超 链 接 


在 网 页 中 ， 文 本 超 链接 是 最 常见 的 一 种 。 它 通过 网 页 中 的 文件 和 其 他 的 文件 进行 链接 。 
语法 : <A hre 全 "链接 地 址 "> 链接 文字 </A> 

说 明 : 在 该 语法 中 ， 链 接地 址 可 以 是 绝对 地 址 ， 也 可 以 是 相对 地 址 。 

实例 代码 : 

<html> 

<head> 

<title> 文 本 链接 </title> 

</head> 

<body> 
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<center><h3> 神 话 故 事 : 八仙 斗 花 龙 </h3></center> 

<a href="next.html"> 下 一 篇 : 女 娲 补 天 </a><br><br> 

&nbsp;&nbsp;&nbsp;&nbsp; 传 说 ， 有 一 天 八仙 要 到 东海 去 游 茵 茉 岛 。 本 来 ， 腾 云 驾 雾 ， 一 晓 眼 就 可 到 ， 可 是 
吕 纯 阳 偏 偏 别出心裁 ， 提 出 要 乘 船 过 海 ， 观 赏 海 景 。 他 拿 来 铁 拐 李 的 拐杖 ， 往 海里 一 抛 ， 喝 声 “ 变 ”， 顿 时 变 成 
一 稻 宽 淫 、 漂 亮 的 大 龙船 ， 八 位 大 仙 坐 船 观 景 ， 喝 酒 斗 歌 ， 好 不 热闹 。 不 料 ， 因 此 惹 出 一 场 麻烦 来 。 原 来 ， 龙 宫 
里 有 条 花 鳞 恶 龙 ， 是 龙王 的 第 七 个 儿子 ， 称 为 “ 花 龙 太子 ”。 这 天 ， 他 闲 得 没事 ， 在 水 晶 宫 外 游 荡 ， 忽 闻 海 面 上 
有 仙 乐 之 声 ， 便 循 声 寻 去 ， 猛 见 一 条 雕花 龙船 ， 内 坐 八 位 奇形怪状 的 大 仙 ， 其 中 有 个 妙龄 女郎 ， 楚 楚 动人 ， 花 龙 
太子 见 此 仙 姿 ， 魂 昕 俱 消 ， 早 忘 了 师傅 南极 仙 翁 的 忠告 ， 忘 了 龙王 母 的 训导 ， 想 入 非 非 ， 似 魔 似 痴 地 迷 上 何 仙姑 
了 。<br> 

&nbsp;&nbsp;&nbsp;&nbsp; 八 仙 在 海上 寻 欢 作乐 , 怎 会 想到 花 龙 太子 半 路 挡 道 。 平静 的 海面 突然 掀起 一 个 浪 
头 ， 将 雕花 龙船 打 翻 了 。 张 果 老 眼 尖 ， 翻 身 候 上 毛驴 背 ， 曹 国 田 心细 ， 脚 踏 巧 板 浪 里 漂 ， 韩 湘子 放下 仙 向 当 坐 骑 ; 
汉 钟 离 打开 薄 扇 垫 脚底 ， 蓝 采 和 攀 住 了 花篮 边 ; 铁 拐 李 失 了 拐杖 ， 幸 亏 抱 着 个 葫芦 ， 只 有 吕 纯 阳 ， 毫 无 戒备 ， 弄 
了 个 浑身 湿 透 。 这 时 ， 汉 钟离 慌忙 检点 人 数 。 点 过 来 ， 点 过 去 ， 只 有 七 位 大 仙 。 男 的 俱 在 ， 独 缺 一 个 何 仙姑 。 奇 
怪 ， 这 何 仙 姑 到 哪里 去 了 呢 ? 汉 钟 离 拘 指 一 算 ， 大 吃 一 惊 ， 原 来 是 花 龙 太子 拦路 抢 亲 ， 把 何 仙姑 抢 到 龙宫 里 去 了 。 
这 一 回 ， 大 仙 们 可 大 动 肝 火 了 。 个 个 咬牙 切 上 元， 杀气 腾腾 ， 直 奔 龙 宫 。 花 龙 太子 知道 七 仙 不 会 善 罢 干 体 ， 早 在 半 
路 上 伺候 着 。 他 见 大 仙 们 来 势 凶猛 ， 慌 忙 挥舞 珍珠 五 鱼 旗 ， 众 动 虾 兵 蟹 将 ， 掀 起 漫 海 大 潮 ， 向 七 仙 济 来 。 汉 钟离 
挺 着 大 肚子 ， 对 飘 然 降落 潮 头 ， 轻 轻 扇 动 蒲 扇 。 只 听 “ 鸣 … 忽 …” 一 声 ， 一 阵 狂 风 把 万 丈 高 的 虾 兵 蟹 将 都 扇 到 九 
霄 云 外 去 了 ， 吓 得 四 大 天 王 连 忙 关 了 南天 门 。 花 龙 太子 见 汉 钟 离 破 了 他 的 阵势 ， 忙 把 脸 一 抹 ， 喝 声 “ 变 ”。 海 里 
突然 窜 出 一 修 巨 鲸 ， 张 开 闸门 似 的 大 口 来 吞 汉 钟 离 。 汉 钟离 急忙 扇 动 蒲 扇 ， 不 料 那 巨 鲸 毫 无 惧 色 ， 嘴 巴 越 张 越 大 。 
这 下 ， 汉 钟离 可 慌 了 神 了 …… 
</body> 
</html> 


在 这 段 代码 中 ， 有 一 个 文本 链接 “下 一 篇 : 女 娲 补 天 ”， 它 链接 到 了 当前 目录 下 的 next.html 文件 。 
文件 next.html 的 实例 代码 如 下 : 


<html> 
<head> 
<title> 文 本 链接 </title> 
</head> 
<body> 

<center><h3> 神 话 故事 : 女 娲 补 天 </h3></center> 

<a href="first.html"> 上 一 篇 : 八仙 斗 花 龙 </a><br><br> 

&nbsp;&nbsp;&nbsp;&nbsp; 有 一 天 ， 大 龙 和 精 卫 、 小 太极 一 起 到 远古 时 代 去 玩 ， 居然 看 到 了 传说 中 能 项 住 上 
天 、 撑 开 天 与 地 的 「 不 周 山 」 ， 也 遇 到 了 美丽 的 女 娲 娘娘 ， 甚 至 看 到 女 娲 补 天 的 过 程 …… 那 真是 一 场 惊天 地 而 泣 
鬼神 的 经 历 ， 讲 来 都 令 人 鼻 酸 ! <br> 

&nbsp;&nbsp;&nbsp;&nbsp; 天 上 的 大 神女 娲 , 用 泥土 做 成 泥 娃娃 ， 再 赋予 它们 生命 。 从 此 女 娲 创造 了 人 ， 人 
们 世 世 代 代 繁 衍生 息 ， 过 着 幸福 的 生活 。 然而 ， 好 景 不 长 。 有 一 年 ， 火 神 祝 融和 水 神 共 工 打 起 仗 来 。 共 工 把 撑 天 
的 柱子 不 周 山 撞 倒 了 ， 天 塌 下 半边 来 ， 砸 了 很 多 写 宕 ， 把 地 也 砸 裂 了 ， 地 上 的 洪水 及 天 河 的 水 不 停 地 漏 下 来 ， 造 
成 大 地 上 水 患 、 火 海 ， 真 是 悲惨 啊 ! <br> 

&nbsp;&nbsp;&nbsp;&nbsp; 女 娲 为 了 解救 人 类 , 决定 采 石 补 天 , 用 五 色 石 把 天 补 起 来 再 用 东海 神 龟 的 四 只 
脚 项 住 苍天 。 眼看 着 补 天 的 大 功 就 要 告 成 ， 却 发 现 五 色 石 不 够 用 ， 大 洞 还 没 补 好 ， 这 可 怎么 办 呢 ? 慈悲 的 女 娲 只 
好 牺牲 自己 的 生命 ， 用 身体 来 补 天 上 的 大 洞 ， 亲 眼看 到 那 场 过 程 ， 大 龙 、 精 卫 和 小 太极 ， 以 及 所 有 的 泥 娃 娃 们 都 
器 红 了 眼睛! 经 过 几 次 努力 ， 女 娲 终于 补 好 了 天 ， 天 地 间 恢 复 了 宁静 ， 还 出 现 了 五 彩云 霞 。 一 切 生物 又 都 生机 过 
勃 地 活 在 大 地 上 。 女 娲 为 人 类 和 世界 万 物 的 生存 而 献身 ， 真 是 令 人 感动 。 
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图 5-1 文本 链接 的 页 面 效 果 图 5-2 打开 的 链接 页 面 


5.2.3 ”设置 超 链 接 的 目标 窗口 


在 创建 网 页 的 过 程 中 ， 有 时 候 并 不 希望 超 链接 的 目标 窗口 将 原来 的 窗口 覆盖 ， 比 如 希望 不 论 链接 
到 何 处 ， 主 页 面 都 保留 在 原 处 。 这 时 可 以 通过 target 参数 设置 目标 窗口 的 属性 。 

语法 : <A href=" 链 接地 址 " target= 目 标 窗口 的 打开 方式 > 链接 元 素 </A> 

说 明 : 在 该 语法 中 ，target 参数 的 取 值 有 4 种 ， 见 表 5-1。 


表 5-1 目标 窗口 的 设置 


目标 窗口 的 打开 方式 
在 上 一 级 窗口 打开 ， 常 在 分 帧 的 框架 页 面 中 使 用 


新 建 一 
在 同一 窗口 打开 ， 与 默认 设置 相同 
在 浏览 器 的 整个 窗口 打开 ， 将 会 忽略 所 有 的 框架 结构 


在 表 5-1 中 提 到 的 框架 是 一 种 页 面 结构 ， 在 后 面 的 章节 中 还 会 详细 讲解 。 
实例 代码 : 


<html> 

<head> 

<title> 目 标 窗口 的 打开 方式 </title> 

</head> 

<body> 
<center><h2> 世 界 影片 介绍 </h2></center> 
<hr size=2 color="#990000"> 
<font size=4>《 孤 岛 》The lsland</font><br><br> 
导演 : 迈克尔。 贝 Michael Bay<br> 
编剧 : 艾 里 克 斯 。 库 兹 曼 Alex Kurtzman<br> 
主演 : 伊 万 迈克 格 雷 戈 Ewan McGregor<br> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 斯 嘉 丽 。 约翰 森 Scarlett Johansson<br> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp:; 迪 蒙 。 郝 德 森 Djimon Hounsou<br> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 迈 克 尔 。 克 拉克 “。 邓肯 Michael Clarke Duncan<br> 
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类 型 :动作 /剧情 /科幻 /惊悚 <br> 

级 别 : PG-13<br> 

发 行 ， 梦 工 场 Dreamwork<br> 

上 映 日 期 : 2005 年 7 月 22 日 <br> 

官方 网 站 : theisland-themovie.com/<br><br> 

<A href="more.html" target="” blank"> 影 片 详情 </A> 
</body> 
</html> 


设置 这 段 代码 的 文件 名 为 mndex.html， 在 这 段 代码 中 包含 一 个 超 链 接 文本 “影片 详情 ”， 单 击 该 文 
字 可 以 打开 more.html 文件 。more.html 文件 的 代码 如 下 : 


<html> 
<head> 
<title> 目 标 窗口 的 打开 方式 </title> 
</head> 
<body> 
<center><h2> 影 片 详情 </h2></center> 
<font size=4>《 孤 岛 》The Island</font><br><br> 
&nbsp;&nbsp;&nbsp;&nbsp; 男 青年 林肯 。6E ( 伊 万 ， 迈克 格雷 戈 ) 生活 在 一 个 貌似 乌托邦 、 却 被 21 世纪 中 
叶 先 进 的 科学 技术 设备 武装 起 来 的 社区 里 。 他 跟 所 有 其 他 社区 居民 一 样 ， 梦 想 被 选中 成 为 “神秘 岛 ”的 访客 ， 
为 据说 那个 岛 是 这 个 星球 上 惟一 没有 被 污染 过 的 一 片 净土 。<br> 
&nbsp;&nbsp;&nbsp;&nbsp; 但 是 , 不 久 后 的 一 个 意外 让 林肯 惊 觉 : 原来 ,他 头脑 中 一 切 关 于 自己 身世 和 整个 
这 个 社区 的 认识 都 是 一 个 巨大 的 谎言 ! 他 和 社区 里 的 所 有 居民 其 实 都 是 “神秘 岛 ” 居 民 们 的 克隆 人 ， 他 们 的 存在 
只 是 为 了 给 他 们 的 “原型 ”提供 各 种 更 换 用 的 身体 零件 ， 而 这 个 社区 其 实 只 是 个 软禁 他 们 的 牢笼 ……<br> 
&nbsp;&nbsp;&nbsp;&nbsp; 得 知事 情 真 相 之 后 ， 林 表意 识 到 : 自己 迟早 会 被 “收割 ”， 送 到 “神秘 岛 ” 去 给 
主人 提供 零件 。 与 其 像 个 牲口 一 样 任 人 宰割 ， 不 如 拼 着 命 杀 出 一 条 血路 来 ! 于 是 乎 ， 林 上 表 和 社区 另 一 位 居民 
美丽 的 女 克隆 人 乔丹 。2D (斯 嘉 丽 ， 约翰 森 ) 一 起 ， 踏 上 了 逃 离 克 隆 社区 、 寻 找 新 生活 的 冒险 之 旅 …… 
</body> 
</html> 
运行 文件 index.html， 单 击 窗口 中 的 “影片 详情 ”链接 ， 可 以 在 一 个 新 的 窗口 打开 文件 more.ht， 


如 图 5-3 所 示 。 
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5-3 ”设置 目标 窗口 的 打开 方式 


5.3 内 部 链接 


在 各 种 超 链接 中 ， 根 据 链接 对 象 的 不 同 ， 设 置 的 方式 也 有 所 区 别 。 内 部 链接 是 指 链接 的 对 象 是 在 
同一 个 网 站 中 的 资源 。 下 面 通 过 一 个 实例 说 明 在 一 个 网 站 中 内 部 链接 的 实现 方法 。 

在 本 实例 中 共 包 含 3 个 文件 ， 分 别 为 index.html、filml.html 和 film2.html。 其 中 ，index.html 作为 
一 个 起 始 页 面 ， 另 外 两 个 文件 放置 在 与 index.html 文件 同 级 的 film 文件 夹 中 。 本 实例 通过 3 个 文件 的 
互相 连接 说 明 在 网 站 内 部 进行 链接 的 方法 。 

文件 index.html 的 代码 如 下 : 


<html> 

<head> 

<title> 内 部 链接 的 实现 </title> 

</head> 

<body> 
<center><h2> 世 界 影片 介绍 </h2></center> 
<hr size=2 color="#990000"> 
<font size=4> 征 婚 启 事 Must Love Dogs</font><br><br> 
导演 编剧 : 格雷。 大 卫 ， 古 德 伯 格 Gary David Goldberg<br> 
主演 : 戴 安 莲 恩 Diane Lane<br> 
&nbspi&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 克 里 斯 托 佛 。 布 拉 默 Christopher Plummer<br> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 约 翰 。 库 萨 克 John Cusack<br> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 伊 丽 莎 白 * 博 金 斯 Elizabeth Perkins<br> 
类 型 爱情 <br> 
地 区 : 美国 <br> 
上 映 日 期 : 2005 年 7 月 <br><br> 
<A href="film/film1.html"> 影 片 详情 </A> 
<hr size=3 color="#990066"> 
<font size=4> 帝 企鹅 日 记 LA MARCHE DE L'EMPEREUR</font><br><br> 
导演 /编剧 : 吕 克 “。 贾 盖 Luc Jacquet<br> 
主演 : Romaine Bohringer<br> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Charles Berling<br> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Jules Sitruk<br> 
类 型 :剧情 <br> 
地 区 : 法 国 <br> 
上 映 日 期 ，2005 年 8 月 <br><br> 
<A href="film/film2.html"> 影 片 详情 </A> 

</body> 

</html> 


在 该 文件 中 包含 了 两 个 链接 ， 一 个 是 影片 “征婚 启事 ”的 详情 介绍 的 链接 ， 另 一 个 是 影片 “ 帝 企 
鹅 日 记 ” 的 介绍 。 这 两 个 文件 都 位 于 文件 夹 film 中， 在 链接 时 需要 在 链接 地 址 中 加 入 目录 和 文件 名 称 。 
影片 “征婚 启事 ”的 介绍 文件 filml.html 的 代码 如 下 : 


<html> 
<head> 
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<title> 内 部 链接 的 实现 </title> 
</head> 
<body> 
<h3> 征 婚 启事 Must Love Dogs</h3> 
剧情 介绍 : <br><br> 
&nbsp;&nbsp;&nbsp;&nbsp; 搞 对 象 从 来 就 不 是 什么 轻松 的 事情 。 有 好 事 者 曾经 总 结 过 如 下 的 爱情 黄 字 公式 : 一 份 
羞 厚 + 两 份 恼怒 + 一 些 对 未 来 "好 运气 "的 盲从 = 所 谓 爱 情 。 而 现 如 今 的 搞 对 象 方式 就 更 没 法 让 人 乐观 了 ， 网 络 交友 、 
吃饭 相亲 、 朋 友 或 亲 威 的 胡乱 介绍 …… 到 底 怎样 才能 找到 合适 的 意中人 啊 ? <br> 
&nbsp;&nbsp;&nbsp;&nbsp; 单 身 女 人 莎 拉 。 诺 兰 ( 戴 安 。 莲 恩 ) 最 近 正 在 为 搞 对 象 的 事情 发 愁 呢 。 三 十 贸 锁 岁 的 她 
以 前 是 一 名 中 学 女 教师 ，8 个 月 前 刚刚 离婚 ， 目 前 一 个 人 过 着 孤苦 的 日 子 。 可 想 而 知 ， 这 样 的 女人 要 么 整 天 伤心 得 
恨不得 患 上 孤僻 症 或 抑郁 症 ; 要 么 就 是 脾气 暴躁 得 让 所 有 亲 威 朋友 敬而远之 。 无 论 如 何 ， 莎 拉 的 家 人 是 绝 不 能 忍 
心 看 她 离婚 这 么 长 时 间 还 没 再 找 对 象 的 ， 于 是 她 的 两 位 姐妹 出 于 好 心 ， 开 始 给 她 介绍 各 种 各 样 离谱 儿 的 男人 来 相 
亲 。 与 此 同时 ， 莎 拉 钙 居 的 父亲 比尔 ( 克 里 斯 托 佛 " 布 拉 黑 ) 也 在 寻找 自己 的 第 二 春 ， 最 近 他 看 上 了 一 位 名 叫 多 丽 的 
思想 开放 的 女人 ……<br><br> 
<A href="../index.html"> 返 回 </A>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<A href="film2.html"> 下 一 个 影片 介绍 </A> 
</body> 
</html> 

初始 页 面 index.html 则 位 于 该 文件 的 上 一 级 目录 中 ， 在 链接 时 需要 在 文件 名 前 添加 “../”。 而 
影片 “ 帝 企 扑 日 记 ” 的 影片 介绍 与 文件 flml.html 位 于 同一 目录 下 ， 是 同 级 文件 ， 在 链接 时 只 需要 
将 链接 地 址 设置 为 该 文件 名 filml.html 即 可 。 文 件 flm2.html 的 代码 如 下 : 


<html> 

<head> 

<title> 内 部 链接 的 实现 </title> 

</head> 

<body> 

<h3> 帝 企鹅 日 记 LA MARCHE DE L'EMPEREUR</h3> 

剧情 介绍 : <br><br> 
&nbsp;&nbsp;&nbsp;&nbsp; 本 片 记录 的 是 在 南极 大 陆 上 生活 的 帝 企 鹅 的 生存 和 繁衍 的 故事 。 影片 展示 了 帝 企 笋 这 
个 滑稽 、 可 爱 而 又 坚强 的 物种 怎样 与 严酷 的 自然 环境 和 它们 的 天 敌 作 斗 争 ， 怎 样 对 小 企鹅 倾注 它们 的 爱 ， 从 而 完 
成 它们 的 生命 延续 之 旅 。<br> 

&nbsp;&nbsp;&nbsp;&nbsp; 在 南极 洲 地 冻 天 寒 的 冬天 ， 企 牲 对 生活 环境 的 选择 十 分 有 限 : 一 边 是 北部 ， 这 里 有 广 
阔 的 海洋 ， 相 对 温暖 的 生存 环境 ， 充 足 的 食物 来 源 ; 一 边 是 南部 ， 寒 冷 终 年 、 冰 雪 覆 盖 ， 但 环境 相对 稳定 。 为 了 
使 刚 出 生 的 小 企鹅 不 受气 候 突变 所 带 来 的 危险 ， 帝 企鹅 只 有 离开 安逸 的 北部 踏 上 长 达 几 百 公里 、 危 险 的 旅程 前 往 
塞 冷 的 南部 ， 在 那里 产 卵 ， 角 卵 ， 直 到 春 回 大 地 。 这 一 切 只 为 了 物种 的 繁衍 。 这 种 看 起 来 柔弱 笨拙 、 容 易 受 伤 的 
动物 ， 在 从 北部 前 往 南部 繁殖 的 九 个 月 的 旅程 中 表现 出 了 顽强 的 生命 力 …… <br><br> 

<A href="../index.html"> 返 回 </A>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

<A href="film1.html"> 下 一 个 影片 介绍 </A> 

</body> 

</html> 


运行 初始 文件 index.html， 会 看 到 页 面 中 包含 两 个 链接 文字 ， 如 图 5-4 所 示 。 
单 击 其 中 一 个 影片 的 链接 “影片 详情 ”可 以 打开 下 一 级 内 容 。 在 这 里 单 击 影 片 “ 征 婚 启 事 ” 的 链 
接 ， 可 以 打开 如 图 5-5 所 示 的 影片 介绍 窗口 。 
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图 5-4 初始 窗口 的 链接 效果 


图 5-5 影片 介绍 窗口 
在 该 窗口 中 包含 了 两 个 链接 ， 单 击 文本 “返回 ”可 以 返回 到 初始 页 面 index.html 中 ; 单 击 文本 “下 
一 个 影片 介绍 ”可 以 直接 打开 另外 一 个 影片 “ 帝 企鹅 日 记 ” 的 介绍 窗口 ， 如 图 5-6 所 示 。 
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图 5-6 影片 “ 帝 企鹅 日 记 ”的 介绍 窗口 
5.4 书签 链接 


当 创建 的 网 页 内 容 特 别 多 时 ， 可 以 通过 书签 对 内 容 进行 链接 ， 这 样 读 者 在 阅读 时 可 以 通过 书签 进 
行内 容 的 跳 转 ， 这 种 链接 也 称 为 网 页 内 部 的 书签 链接 。 


5.4.1 建立 书签 


书签 可 以 与 链接 文字 在 同一 页 面 ， 也 可 以 在 不 同 的 页 面 。 但 要 实现 网 页 内 部 的 书签 链接 ， 都 需要 
先 建立 书签 。 通 过 建立 的 书签 才能 对 页 面 的 内 容 进 行 引导 和 跳 转 。 
语法 : <A name=" 书 签名 称 "> 文 字 </A> 


。72 。 


HTML 网 页 设计 参考 手册 


说 明 : 在 该 语法 中 ， 书 签名 称 就 是 对 于 后 面 要 跳 转 所 创建 的 书签 ， 而 文字 则 是 设置 链接 后 跳 转 的 


位 置 。 


段 代 


实例 代码 : 


<html> 

<head> 

<title> 定 义 书签 </title> 

</head> 

<body> 

<h3> 爱 情 测试 ， 你 的 恋爱 狂热 度 是 多 少 </h3> 

<hr size=3> 

<A name="answerA"> 选 择 A: 凌晨 零 时 到 清晨 六 点 </A><br> 

&nbsp; &nbspi&nbsp;&nbsp; 向 来 朝气 蓬勃 的 你 ， 的 确 喜欢 谈 恋 爱 ， 喜 欢 那 种 活力 十 足 的 感觉 ， 但 是 你 的 恋爱 狂热 
度 ， 却 是 平平 而 已 。 因 为 你 对 生活 中 的 其 他 事物 ， 如 你 个 人 的 嗜好 ， 也 有 着 恋爱 般 的 热度 ， 过 度 分 散 目标 的 结果 ， 
使 你 的 恋爱 狂热 度 只 有 30%<br><br> 

<hr size=2> 

<A name="answerB"> 选 择 B: 清晨 六 点 到 中 午 十 二 点 </A><br> 

&nbsp; &nbsp; &nbsp; &nbsp; 你 那 死 不 服输 的 性 格 将 你 在 人 群 中 独立 出 来 ， 恋 爱 的 时 候 ， 亦 因为 不 肯 对 对 方 坦白 
而 遭 抛弃 ， 你 唯一 的 好 处 是 你 绝 不 拖 拖 拉 拉 没 完 没 了 。 但 是 有 时 候 恋 爱 也 要 讲 小 策略 的 陶 ， 侦 尔 “ 认 输 ” 也 未 尝 
不 是 件 好 事 ! <br><br> 

<hr size=2> 

<A name="answerC"> 选 择 C; 中 午 十 二 点 到 下 午 六 点 </A><br> 

&nbsp; &nbsp; &nbsp; &nbsp; 你 是 个 十 分 理智 的 MM， 但 聪明 反 被 聪明 误 跌 ， 你 对 每 件 事 都 小 心 谨慎 ， 在 爱情 道 
路 上 ， 因 怕 受 伤 而 不 敢 用 情 太 深 ， 但 这 会 令 你 的 恋人 有 种 被 忽视 的 感 党 ， 对 你 的 热情 亦 因此 大 减 ， 其 实 有 时 候 在 
他 面前 装 迷糊 装 可 爱 ， 他 会 更 加 喜欢 你 存 。<br><br> 

<hr size=2> 

<A name="answerD"> 选 择 D: 下 午 六 点 到 凌晨 零点 </A><br> 

&nbsp; &nbsp; &nbsp; &nbsp; 你 有 点 神经 质 哦 ， 但 是 是 个 很 执著 的 MM， 别 人 很 难 适 应 你 的 处 世 作风 了 哦 ， 你 的 男 
朋友 也 一 样 哦 ， 你 一 时 对 他 风情 万 种 ， 一 时 对 他 冷 若 冰 霜 ， 令 他 感到 十 分 迷惑 。 即 使 对 你 一 见 钟情 ， 他 亦 会 被 你 
给 他 飘忽 不 定 的 感觉 而 吓 得 溜 之 大 吉 ， 要 改变 这 样 的 状况 ，MM 可 要 好 好 控制 一 下 自己 的 情绪 哦 ! 

</body> 

</html> 


在 这 段 代码 中 ， 定 义 了 4 个 书签 ， 分 别 命名 为 answerA、answerB、answerC 和 answerD。 运 行 这 
码 ， 效 果 如 图 5-7 所 示 。 
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图 5-7 定义 书签 
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可 以 看 到 ， 在 浏览 器 中 并 不 能 看 到 定义 的 书签 ， 但 是 它 实际 上 已 经 存在 了 。 此 时 就 可 以 定义 书签 
链接 了 。 


5.4.2 ”链接 到 同一 页 面 的 书签 


下 面 就 可 以 为 刚才 制作 的 书签 添加 链接 内 容 了 。 在 代码 的 前 面 增加 链接 文字 和 链接 地 址 就 能 够 实 
现 同 页 面 的 书签 链接 。 

语法 : <A hre 伍 "# 书 签 的 名 称 "> 链接 的 文字 </A> 

说 明 : 在 该 语法 中 ， 书 签 的 名 称 就 是 刚才 所 定义 的 书签 名 ， 也 就 是 name 的 赋值 。 而 # 则 代表 这 是 
书签 的 链接 地 址 。 

实例 代码 : 


<html> 

<head> 

<title> 定 义 书 签 </title> 

</head> 

<body> 

<h3> 爱 情 测 试 ， 你 的 恋爱 狂热 度 是 多 少 </h3> 

&nbsp;&nbsp; 情 窦 初 开 的 漂亮 小 MM 终于 找到 了 心中 的 白马 王子 啦 ! 可 是 可 是 …… 是 不 是 好 想 好 想 将 感情 更 顺利 
地 进行 下 去 、 急 速 升温 ? 那么 ， 可 爱 的 MM 们 快 来 做 这 个 测试 吧 …… 保 证 让 你 和 心中 的 白马 王子 开 开心 心 一 路 牵 
手 到 底 。 一 天 之 中 ， 你 最 喜欢 什么 时 间 峨 ? <br><br> 

<A href="#answerA">A: 凌 晨 零 时 到 清晨 六 点 </A><br><br> 

<A href="#answerB">B: 清 晨 六 点 到 中 午 十 二 点 </A><br><br> 

<A href="#answerC">C: 中 午 十 二 点 到 下 午 六 点 </A><br><br> 

<A href="#answerD"> 下 午 六 点 到 凌晨 零 时 </A><br><br> 

<hr size=3><hr size=3> 

<A name="answerA"> 选 择 A: 凌晨 零 时 到 清晨 六 点 </A><br> 

&nbsp; &nbspi&nbsp;&nbsp; 向 来 朝气 蓬勃 的 你 ， 的 确 喜欢 谈 恋爱 ， 喜 欢 那 种 活力 十 足 的 感 党 ， 但 是 你 的 恋爱 狂热 
度 ， 却 是 平平 而 已 。 因 为 你 对 生活 中 的 其 他 事物 ， 如 你 个 人 的 嗜好 ， 也 有 着 恋爱 般 的 热度 ， 过 度 分 散 目标 的 结果 ， 
使 你 的 恋爱 狂热 度 只 有 30%<br><br> 

<hr size=2> 

<A name="answerB"> 选 择 B: 清晨 六 点 到 中 午 十 二 点 </A><br> 

&nbsp; &nbsp; &nbsp; &nbsp; 你 那 死 不 服输 的 性 格 将 你 在 人 群 中 独立 出 来 ， 恋 爱 的 时 候 ， 亦 因为 不 肯 对 对 方 坦白 
而 遭 地 弃 ， 你 唯一 的 好 处 是 你 绝 不 拖 拖 拉 拉 没完 没 了 。 但 是 有 时 候 恋爱 也 要 讲 小 策略 的 跌 ， 偶 尔 “认输 ”也 未 尝 
不 是 件 好 事 ! <br><br> 

<hr size=2> 

<A name="answerC"> 选 择 C: 中 午 十 二 点 到 下 午 六 点 </A><br> 

&nbsp; &nbsp; &nbsp; &nbsp; 你 是 个 十 分 理智 的 MM， 但 聪明 反 被 聪明 误 跌 ， 你 对 每 件 事 都 小 心 谨慎 ， 在 爱情 道 
路 上 ， 因 怕 受 伤 而 不 敢 用 情 太 深 ， 但 这 会 令 你 的 恋人 有 种 被 忽视 的 感觉 ， 对 你 的 热情 亦 因此 大 减 ， 其 实 有 时 候 在 
他 面前 装 迷糊 装 可 爱 ， 他 会 更 加 喜欢 你 夏 。<br><br> 

<hr size=2> 

<A name="answerD"> 选 择 D: 下 午 六 点 到 凌晨 零点 </A><br> 

&nbsp; &nbsp; &nbsp; &nbsp; 你 有 点 神经 质 哦 ， 但 是 是 个 很 执著 的 MM， 别 人 很 难 适 应 你 的 处 世 作风 了 峨 ， 你 的 男 
朋友 也 一 样 蛾 ， 你 一 时 对 他 风情 万 种 ， 一 时 对 他 冷 若 冰 霜 ， 令 他 感到 十 分 迷惑 。 即 使 对 你 一 见 钟情 ， 他 亦 会 被 你 
给 他 飘忽 不 定 的 感觉 而 吓 得 溜 之 大 吉 ， 要 改变 这 样 的 状况 ，MM 可 要 好 好 控制 一 下 自己 的 情绪 哦 ! 

</body> 

</html> 
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运行 这 段 代 码 ， 可 以 看 到 4 个 文字 链接 ， 如 图 5-8 所 示 。 
在 页 面 中 单 击 其 中 的 一 个 链接 文字 ， 页 面 将 会 跳 转 到 该 链接 的 书签 所 在 位 置 。 单 击 “A: 清晨 零 时 
到 清晨 六 点 ”， 跳 转 后 的 页 面 效果 如 图 5-9 所 示 。 
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和 也 有 着 恋爱 般 的 热度 ， 过 度 分 散 目标 的 结果 ， 你 的 要 和 
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选择 B， 清 晨 六 点 到 中 午 十 二 点 
你 屠 死 不 服输 的 性 格 将 你 在 人 群 中 独立 出 来， 和 的 人 ， . 亦 因 为 恒 
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请 广 广 道 动 而 
图 5-8 ”建立 书签 和 链接 的 页 面 效果 图 5-9 跳 转 的 效果 


单 击 页 面 中 的 “C: 中 午 十 二 点 到 下 午 六 点 ”， 页 面 跳 转 到 书签 answerC 所 在 的 位 置 ， 如 图 5-10 
所 示 。 
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你 是 个 二 分 浊 入 的， 但 聘 明 反 被 聪明 误 哦 ， 你 对 每 件 事 都 小 心 诞 
慎 ， 在 爱情 道路 上 ， 因 怕 受 伤 而 不 敢 用 情 太 深 ， 但 这 会 令 你 的 态 人 有 种 被 
忽视 的 感觉 ， 对 你 的 牙 情 亦 因 此 大 泪 ， 其 突 有 时 候 在 字面 前 装 六 述 装 可 
受 ， 他 会 更 加 喜欢 你 跌 。 


选择 D， 人 
你 有 点 神经 质 只 ， 但 是 是 个 很 执著 的 WI， 别 人 很 难 适应 你 的 处 世 作 是 


二 六 三 广 着 澳 畏 - 


mm jnhh 用 Pa- 


图 5-10 跳 转 到 书签 所 在 位 轩 
5.4.3 ”链接 到 不 同 页 面 的 书签 


书签 链接 不 但 可 以 链接 到 同一 页 面 ， 也 可 以 在 不 同 页 面 中 设置 。 

语法 : <A href=" 链 接 的 文件 地 址 # 书 签 的 名 称 "> 链接 的 文字 </A> 

说 明 : 在 该 语法 中 ， 与 同一 页 面 的 书签 链接 不 同 的 是 ,需要 在 链接 的 地 址 前 增加 文件 所 在 的 位 置 。 
下 面 设置 一 个 单独 的 链接 页 面 ， 使 其 链接 到 前 面 定义 的 书签 页 面 。 

实例 代码 : 

<html> 

<head> 

<title> 定 义 书 签 </title> 

</head> 


第 5 章 超 链 接 "75。 


<body> 

<h3> 爱 情 测 试 : 你 的 恋爱 狂热 度 是 多 少 </h3> 

&nbsp;&nbsp; 情 窦 初 开 的 漂亮 小 MM 终于 找到 了 心中 的 白马 王子 咬 ! 可 是 可 是 …… 是 不 是 好 想 好 想 将 感情 更 顺利 
地 进行 下 去 、 急 速 升温 ? 那么 ， 可 爱 的 MM 们 快 来 做 这 个 测试 吧 …… 保 证 让 你 和 心中 的 和 白马 王子 开 开 心心 一 路 牵 
手 到 底 。 一 天 之 中 ， 你 最 喜欢 什么 时 间 峨 ? <br><br> 

<A href="04-1.html#answerA">A: 凌晨 零 时 到 清晨 六 点 </A> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

<A href="04-1.html#answerB">B: 清晨 六 点 到 中 午 十 二 点 </A><br><br> 

<A href="04-1.html#answerC">C: 中 午 十 二 点 到 下 午 六 点 </A> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

<A href="04-1.html#answerD">D: 下 午 六 点 到 凌晨 零 时 </A><br><br> 

</body> 

</html> 


运行 这 段 代码 ， 效 果 如 图 5-11 所 示 。 
单 击 其 中 的 某 个 链接 ， 例 如 “B: 清晨 六 点 到 中 午 十 二 点 ”， 就 可 以 直接 链接 到 书签 所 在 的 位 置 ， 
如 图 5-12 所 示 。 


加 定 义 书签 - Microsoft Internet Explorer oilxl 
| 文 作 E。 轴 和 6) 查看 (0 收藏 (@) 工具 ID 帮助 由 

[EE JE: "| 
| ED | 克 ]onibooioo mann 下 文件 05\04 书 全 鱼 近 043 hem 


爱情 测试 : 你 的 恋爱 狂热 度 是 多 少 


可 
| 文件 虽 。 护 儿 (E) 查看 册 。 收藏 (a 工具 (D 帮助 4 | 


| 情人 当 | 网 扫 二 辐 收 二天 汉人 动 | 的" 名 可 "” 
IE SC NR Te TD 区 过 


和 和 人 人 人 和 下、 和 敢 人 | 
提 村 相 下 去: 多 rg a 

要 的 好 们 快 天 这 个 济 江 吧 …… 保 证 上 你 和 心中 的 白马 王子 i 3 
和 人 人 忆 天 人 这 个 测 呈 保证 你 入 做， 亦 因为 不 对 对 方 坦白 而 遭 抽 章 ， 你 叭 一 的 好 处 是 你 绝 不 


相生 区 站 从 但 有时 避 四 要 可 小 弘 于 偶尔 人 | 
也 未 尝 不 是 件 好 事 | 


A: 凌晨 术 时 到 清晨 六 点 六 点 到 中 午 十 二 点 
Ce_ 中 午 十 二 点 到 下 午 六 点 D， 下 午 六 点 到 污 时 村 时 选择 C， 中 午 十 二 点 到 下 午 六 点 
车 信人 工 AisaneAanassmunam wws 副 
[3] I [eb] 4 BE | [| 局 到 4 
图 5-11 运行 效果 图 5-12 链接 的 效果 


5.5 外 部 链接 


外 部 链接 是 指 跳 转 到 当前 网 页 之 外 的 资源 中 ， 例 如 其 他 网 站 中 某 个 页 面 或 元 素 。 这 种 链接 在 设置 
时 一 般 需 要 书写 绝对 地 址 ， 最 常见 的 是 使 用 URL 统一 资源 定位 符 “http://” 来 表示 。 此 外 还 有 一 些 划 
他 的 格式 ， 见 表 5-2。 


表 5-2 绝对 地 址 的 设置 格式 


格 式 表示 的 含义 

http:// 采用 WWW 服 务 进 入 万 维 网 站 点 
/ 通过 FTP 访 问 文件 传输 服务 器 

telnet:// 启动 Telnet 

mailto:// 直接 启动 邮件 系统 Email 
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5.5.1 通过 HTTP 协议 


网 页 中 最 常 使 用 HTTP 协议 进行 外 部 链接 的 是 在 设置 友情 链接 时 。 

语法 : <A href-"http://……"> 链 接 文字 </A> 

说 明 : 在 该 语法 中 , http:// 表 明 这 是 关于 HTTP 协议 的 外 部 链接 , 而 在 其 后 则 输入 网 站 的 网 址 即 可 。 
实例 代码 : 


<html> 

<head> 

<title> 唐 诗 宋词 欣赏 </title> 

</head> 

<body> 

<font size=5 color="#990066"> 浣 溪 沙 </font><br><br> 
苏轼 <br> 

游 薪 水 清泉 寺 ， 寺 临 兰溪 ， 溪 水 西 流 。<br> 

山下 兰 芽 短 浸 溪 ， 松 间 沙 路 净 无 泥 。<br> 
萧萧 昔 雨 子规 啼 。 谁 道人 生 无 再 少 ? <br> 

门 前 流水 尚 能 西 ! 休 将 白 发 唱 黄 鸡 。<br> 

<hr size=2> 

<A href=" http://www.shiandci.net "> 更 多 唐诗 宋词 ， 请 进入 …… </A> 
</body> 

</html> 


运行 这 段 代 码 ， 可 以 实现 如 图 5-13 所 示 的 页 面 效 果 。 
在 页 面 中 包含 一 个 文本 链接 ， 它 所 链接 的 地 址 就 是 万 维 网 上 的 一 个 网 址 ， 单 击 链接 文字 可 以 打开 
如 图 5-14 所 示 的 网 站 。 


al 
LL" 
EER] 
入 馈 诗 宋 司 欣赏 - Microsoft Internet Explorer 站 [x|| 
| 文件 (ED) 捐 加 (查看 (v) 收藏 () 工具 (D 帮助) 
| + 有 EE- +- 全 旧 人身 | 四 过 四 收 基 天 克拉 体 地 | 也- 到 
| 编 址 (b) | 和] bbookos Hem 源 文 位 105VOsA_http html 可 eg 到 
sor 习 
浣溪沙 
硬 [3 


图 5-13 设置 外 部 链接 的 页 面 图 5-14 打开 的 链接 地 址 
5.5.2 通过 FTP 协议 


网 络 中 还 存在 一 种 FTP 协议 ， 这 是 一 种 文件 传输 协议 。 在 很 多 FTP 地 址 中 ， 可 以 获得 许多 有 用 的 
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软件 和 共享 文件 。FTP 需要 获得 许可 才能 在 网 络 上 传播 ， 因 此 需要 从 服务 器 管理 员 处 取得 登录 的 权限 。 
有 一 些 FTP 服务 器 可 以 匿名 访问 ， 同 样 能 够 获得 一 些 公 开 的 数据 。 

语法 : <A hre 全 "ftp:/……"> 链 接 文字 </A> 

说 明 : 在 该 语法 中 ，ftp:// 表 明 这 是 关于 FTP 协议 的 外 部 链接 ， 而 在 其 后 则 输入 网 站 的 网 址 即 可 。 

实例 代码 : 

<html> 

<head> 

<title> 使 用 FTP 服务 </title> 

</head> 

<body> 

进行 FTP 服务 器 的 链接 : 

<hr size=2> 

<A href="ftp://ftp.pku.edu.cn" target=”blank"> 进 入 北京 大 学 FTP 站 点 </A> 

</body> 

</html> 


运行 这 段 代码 ， 可 以 实现 如 图 5-15 所 示 的 页 面 效 果 。 
在 页 面 中 包含 一 个 文本 链接 ， 它 所 链接 的 地 址 就 是 一 个 FTP 网 址 。 而 设置 的 target 参数 则 决定 了 
在 打开 的 新 页 面 中 进行 链接 。 打 开 的 效果 如 图 5-16 所 示 。 


TT -Dox 
| 5H NE i AD 
[EE EE EL | 
[ET E Ty Ea] 


mp [ 贸 ] 
进入 北京 六 ?| ftp.pku.edu.cn 


最 和 加: pskueducn 
翰 己 和 Anonyus 


二 加 日 全 | 到 扫 归 回收 天 堵 斤 体 ” 
TITTTTRITITETTTTTT 区 过 


进行 FTP 服 务 器 的 链接 ， 


进入 北京 大 当 PT 明 塌 


| 赂 fpimtp phueduenf 0] 


图 5-15 设置 FTP 链接 的 页 面 5-16 打开 的 FTP 地址 
5.5.3 ”通过 Telnet 链接 


Telnet 常常 用 来 登录 一 些 BBS 网 址 ， 也 是 一 种 远程 登录 方式 。 

语法 : <A href="telnet:// 地 址 "> 链接 文字 </A> 

说 明 : 这 种 链接 方式 与 其 他 两 种 类 似 ， 不 同 的 就 是 它 登 录 的 是 Telnet 站 点 。 
实例 代码 : 

<html> 

<head> 

<title> 建 立 Telnet 链接 </title> 

</head> 
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<body> 

&nbsp; &nbsp; &nbsp;&nbsp; 清华 大 学 的 前 身 是 清华 学 堂 ， 始 建 于 1911 年 ， 曾 是 由 美国 “退还 ”的 部 分 “ 庚 子 
赔款 ”建立 的 留美 预备 学 校 。1912 年 更 名 为 清华 学 校 ，1925 年 设立 大 学 部 ， 开 始 招收 四 年 制 大 学 生 ， 同 年 开办 
研究 院 〈 国 学 门 ) ，1928 年 更 名 为 “国立 清华 大 学 ”， 并 于 1929 年 秋 开 办 研究 院 ， 各 系 设 研究 所 。1937 年 抗日 
战争 爆发 后 ， 南 迁 长 沙 ， 与 北京 大 学 、 南 开 大 学 联合 办 学 ， 组 建国 立 长 沙 临时 大 学 ，1938 年 迁 至 昆明 ， 改 名 为 国 


立 …… <br><br> 

<hr> 

<A href="telnet://166.111.8.238"> 清 华 大 学 BBS 站 点 </A> 
</body> 

</html> 


运行 这 段 代码 ， 效 果 如 图 5-17 所 示 。 
单 击 页 面 中 的 链接 文字 ， 将 会 启动 Telnet 工具 进入 该 BBS 站 点 ， 如 图 5-18 所 示 。 


ET rrr EEE 
| 文件 (编辑 [E) 查看 (人) 收 帘 (好 ”工具 (DD 帮助 HH) 


El 
| + 亨 “ 二 国 国 夺 | 加 灯 天 bi 天 凤 扫 入 邓 | 动 " 辐 加 ~ 回 ” 
| 天 让 6 | 各] Diboolo9 rtml 诉 交 音 paID7A_ieirethtml -|] BR 到 


a 


a ea or 建 于 1911 年 ， 曾 是 由 美国 “ 
校 。1912 


争 爆 发 后 ， 南 迁 长 诊 ， 与 北京 大 学 、 南 
如 学 ， 组 建国 立 长 沙 临 时 大 学 ， 1958 年 过 至 民明 ， 改名 为 国 


清华 大 学 BBS 站 点 
[BE [EE] 


图 5-17 Teinet 链接 页 面 图 5-18 水木 清 华 BBS 站 点 


5.5.4 发 送 到 Email 


在 网 络 中 ， 很 多 拥有 个 人 网 页 的 朋友 都 喜欢 在 网 站 的 醒目 位 置 处 写 上 自己 的 电子 邮件 地 址 ， 这 样 
网 页 浏览 者 一 旦 用 鼠标 单 击 一 下 由 mailto 组 成 的 超 链 接 后 ， 就 能 自动 打开 当前 计算 机 系统 中 默认 的 电 
子 邮件 客户 端 软 件 ， 例 如 Outlook Express、Foxmail 等 。 其 实 这 是 通过 mailto 标签 来 实现 的 。 

语法 : <A hre 全 "mailto: 电 子 邮 件 地 址 "> 链接 文字 </A> 

说 明 : 在 该 语法 的 电子 邮件 地 址 后 还 可 以 增加 一 些 参 数 ， 见 表 5-3。 


表 5-3” mailto 标签 的 参数 


语 法 
<A hre 全 "mailto: 电 子 邮 件 地 址 ?CC= 电 子 邮件 地 址 "> 链接 文字 </A> 
<A hre 人 "mailto: 电 子 邮件 地 址 ?Subject 主 题 文字 "> 链接 文字 </A> 

<A href"mailto: 电 子 邮件 地 址 ?BCC= 电 子 邮件 地 址 "> 链接 文字 </A> 
<A hre 会 "mailto: 电 子 邮件 地 址 ?Body= 邮 件 内 容 "> 链接 文字 </A> 


这 些 参数 可 以 没有 ， 也 可 以 同时 设置 儿 个 。 在 带 有 多 个 参数 时 ， 需 要 使 用 & 符 号 对 参数 进行 分 隔 。 
实例 代码 : 


Subject 
BCC 
Bod 
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<html> 

<head> 

<title> 发 送 电子 邮件 </title> 

</head> 

<body> 

&nbsp; &nbsp; 如 果 您 在 使 用 网 站 的 时 候 发 现 了 问题 或 者 Bug， 欢 迎 您 给 我 们 提出 。<br> 
<A href="mailto:bug@sina.com?BCC=xyf@163.com"> 发 现 问 题 </A><br><br> 

&nbsp; &nbsp; 如 果 您 对 我 们 的 工作 有 建议 或 意见 ， 也 欢迎 您 来 信 提 出 。<br> 

< A href="mailto:opinion@sina.com?CC=xyf@163.com&Subject= 意 见 和 建议 "> 提出 意见 建议 </A> 
<br><br> 

<A href="mailto:xyf@163.com"> 给 作者 来 信 </A> 

</body> 

</html> 


运行 这 段 代码 ， 效 果 如 图 5-19 所 示 。 

单 击 页 面 中 的 链接 文字 “发 现 问题 ” 可 以 打开 默认 的 电子 邮件 软件 Outlook Express, 如 图 5-20 
所 示 。 在 软件 中 可 以 看 到 ， 除 了 设置 的 Email 地 址 之 外 ， 在 “ 密 件 抄 送 ”文本 框 中 也 设置 了 电子 
邮件 的 地 址 。 


文 几 ( 
EE IEES 
tht [BT oanbochdos Mri thoDs emi hem 了 em 


区 问题 或 者 3ue， 获 迎 您 给 
改观 问题 


加 只 您 对 我 们 的 工作 有 建议 或 意见 ， 也 欢迎 称 来 信 提 出 
提出 意见 建议 


到 | 
[bs 了 


5-19 设置 Email 链接 的 页 面 图 5-20 ”发 送 电子 邮件 


单 击 页 面 中 的 “提出 意见 建议 ”文字 链接 ， 在 打开 的 Outlook Express 中 ， 除 了 “ 收 件 人 ”、“ 抄 
送 ” 文 本 框 中 设置 了 电子 邮件 外 ， 还 同时 设置 了 邮件 的 主题 ， 如 图 5-21 所 示 。 


文人) 凰 玫 二 V] 闭 AD 55/0) IRT Mt TH 


| 
| | 


5-21 发 送 邮 件 设置 


5.5.5 “下载 文件 


在 浏览 网 页 时 下 载 一 些 文件 也 是 常 有 的 事情 ， 在 某 些 网 站 中 ， 只 需要 单 击 一 个 链接 就 可 以 自动 下 
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载 文件 ， 非 常 方便 ， 这 也 可 以 使 用 文本 链接 来 实现 。 


盘 。 


语法 : <A hre 伟 "文件 所 在 地 址 "> 链接 文字 </A> 
说 明 : 在 文件 所 在 地 址 中 设置 文件 的 路 径 ， 可 以 是 相对 地 址 ， 也 可 以 是 绝对 地 址 。 
实例 代码 : 


<html> 

<head> 

<title> 文 件 的 下 载 </title> 

</head> 

<body> 

<h4> 网 际 快车 FlashGet</h4> 

<A href="file.exe"> 软 件 下 载 试用 </A><br><br> 

网 际 快车 FlashGet 通过 把 一 个 文件 分 成 几 个 部 分 同时 下 载 可 以 成 倍 地 提高 速度 ， 下 载 速度 可 以 提高 100% 到 
500%。FlashGet 可 以 创建 不 限 数目 的 类 别 ， 每 个 类 别 指定 单独 的 文件 目录 ， 不 同 的 类 别 保存 到 不 同 的 目录 中 去 ， 
强大 的 管理 功能 包括 支持 拖 搜 、 更 名 、 添 加 描述 、 查 找 、 文 件 名 重复 时 可 自动 重 命名 等 ， 而 且 下 载 前 后 均 可 轻易 
管理 文件 。 

</body> 

</html> 


运行 这 段 代码 ， 效 果 如 图 5-22 所 示 。 
单 击 页 面 中 的 文本 链接 “软件 下 载 试用 ”， 可 以 打开 如 图 5-23 所 示 的 提示 对 话 框 。 


图 5-22 设置 文件 下 载 页 面 图 5-23 文件 下 载 的 提示 对 话 框 


在 该 对 话 框 中 可 以 单 击 “ 打 开 ” 按 钮 直接 打开 软件 ， 也 可 以 单 击 “ 保 存 ” 按 钮 将 该 文件 保存 到 磁 
如 果 选 择 保存 文件 到 磁盘 ， 将 会 打开 如 图 5-24 所 示 的 对 话 框 。 在 对 话 框 中 设置 相应 的 存储 位 置 ， 


单 


ff “保存 ”按钮 即 可 实现 文件 的 保存 。 
EE | 
的 | 部 mr 
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5-24 ”另存 为 对 话 框 


图 像 格式 
添加 图 像 一 一 img 
和 诅 置 图 像 属性 
图 像 的 超 链 接 
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万 维 网 (World Wide \Web) 与 其 他 网 络 类 型 (如 FTP) 最 大 的 不 同 就 在 于 
它 在 网 页 上 可 呈现 丰富 的 色彩 及 图 像 。 用 户 可 以 在 网 页 中 放 入 自己 的 照片 ; 可 以 
放 入 公司 的 商标 ; 还 可 以 把 图 像 作为 一 个 按钮 来 链接 到 另 一 个 网 页 ， 这 就 让 网 页 
变 得 丰富 多 彩 了 。 
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6.1 图 像 格式 


每 天 在 网 络 上 交流 的 计算 机 多 不 胜 数 ， 因 此 使 用 的 图 像 格式 一 定 能 够 被 每 一 个 操作 平台 所 接受 。 
当前 万 维 网 上 流行 的 图 像 格式 以 GIF 及 JPEG 为 主 ， 另 外 还 有 一 种 名 为 PNG 的 文件 格式 ， 也 被 越 来 越 
多 地 应 用 在 网 络 中 。 以 下 分 别 对 这 3 种 图 像 格 式 的 特点 进行 介绍 。 

1. GIF 格式 

GIF 格式 采用 LZW 压缩 ， 是 以 压缩 相同 颜色 的 色 块 来 减少 图 像 大 小 的 。 由 于 LZW 压缩 不 会 造成 
任何 品质 上 的 损失 ， 而 且 压 缩 效率 高 ， 再 加 上 GIF 在 各 种 平台 上 都 可 使 用 ， 所 以 很 适合 在 互联 网 上 使 
用 ,但 GIF 只 能 处 理 256 色 。 

GIF 格式 适合 于 商标 、 新 闻 式 的 标题 或 其 他 小 于 256 色 的 图 像 。 要 想 将 图 像 以 GIF 的 格式 存储 ， 
可 参考 下 面 范例 的 方法 。 

LZW 压缩 是 一 种 能 将 数据 中 重复 的 字符 串 加 以 编码 制作 成 一 数据 流 的 一 种 压缩 法 ， 通 常 应 用 于 
GIF 图 像 文 件 的 格式 。 

2. JPEG 格式 

对 于 照片 之 类 全 彩 的 图 像 ， 通 常 都 以 JPEG 格式 来 进行 压缩 ， 也 可 以 说 ，JPEG 格式 通常 用 来 保存 
超过 256 色 的 图 像 格 式 。JPEG 的 压缩 过 程 会 造成 一 些 图 像 数据 的 损失 ， 所 造成 的 “损失 ”是 剔除 一 些 
视觉 上 不 容易 察觉 的 部 分 。 如 果 剔 除 适 当 ， 视 觉 上 不 但 能 够 接受 ， 而 且 图 像 的 压缩 效率 也 会 提高 ， 使 
图 像 文 件 变 小 ; 反之 ， 剔除 太 多 图 像 数 据 ， 则 会 造成 图 像 过 度 失真 。 

3. PNG 格式 

PNG (Portable Network Graphics) 图 像 格 式 是 一 种 非 破坏 性 的 网 页 图 像 文件 格式 ， 它 提供 了 将 图 
像 文件 以 最 小 的 方式 压缩 却 又 不 造成 图 像 失 真 的 技术 。 它 不 仅 具备 了 GIF 图 像 格式 的 大 部 分 优点 ， 而 
且 还 支持 48-bit 的 色彩 ， 更 快 的 交错 显示 ， 跨 平台 的 图 像 亮度 控制 ， 更 多 层 的 透明 度 设 置 。 


6.2 添加 图 像 


img 


有 了 图 像 文件 之 后 ， 就 可 以 使 用 img 标记 将 图 像 插入 到 网 页 中 ， 从 而 达到 美化 页 面 的 效果 。 

语法 : <img src=" 图 像 文 件 的 地 址 "> 

说 明 : 在 该 语法 中 ，src 参数 用 来 设置 图 像 文件 所 在 的 路 径 ， 这 一 路 径 可 以 是 相对 路 径 ， 也 可 以 是 
绝对 路 径 。 

实例 代码 : 

<html> 

<head> 

<title> 插 入 图 像 文 件 </title> 

</head> 

<body> 
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<h3> 动 漫 世界 ， 精 彩 无 限 ! </h3> 
动漫 名 称 ; 魔 卡 少女 樱 <br> 


&nbspi&nbsp; 打 开封 印 之 书 的 木 之 本 樱 ， 因 身 负 回收 库 洛 牌 的 任务 而 变 身 成 拥有 魔法 的 魔 卡 少女 ， 就 此 展开 
了 一 系列 的 冒险 。 动 画 的 基本 架构 与 漫画 大 致 相同 ， 在 细节 部 分 做 了 一 些 改动 ， 并 出 现 了 原作 中 没有 的 卡片 和 角 
色 ， 卡 片 收集 的 顺序 上 也 有 所 变化 ， 剧 情节 奏 较 漫画 延缓 不 少 。 


<br> 


<! 一 在 页 面 中 居中 插入 一 张 卡通 图 片 -> 


<center> 


<img src="pic.jpg"> 


</center> 
</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 页 面 中 插入 了 图 片 ， 如 图 6-1 所 示 。 
那么 图 片 不 会 自动 换行 。 


6.3 设置 图 像 属性 
在 网 页 中 直接 插入 图 片 时 ， 图 像 的 大 小 和 原 图 是 相同 的 ， 而 在 实际 应 用 时 可 以 通过 各 种 图 像 属性 
的 设置 调整 图 像 的 大 小 、 分 辩 率 等 内 容 。 
6.3.1 图 像 高 度 一 一 height 


通过 height 属性 可 以 设置 图 片 显示 的 高 度 ， 默 认 情 况 下 ， 改 变 高 度 的 同时 ， 其 宽度 也 会 等 比例 进 


行 调整 。 
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如 果 不 通 过 <br> 标 记 进 行 换行 操作 ， 
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站 攻关 拉 放空 银 二 人 坟 ， 守 民 开 了 一 下 反 旺 了 
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图 6-1 插入 图 片 的 效果 


语法 : <img src=" 图 像 文件 的 地 址 " height= 图 像 的 高 度 > 
说 明 : 在 该 语法 中 ， 图 像 的 高 度 单 位 是 像素 。 


实例 代码 : 


<html> 
<head> 
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<title> 设 置 页 面 图 像 大 小 </title> 
</head> 
<body> 
<h3> 电 视 剧 :仙剑 奇 侠 传 </h3> 
&nbsp;&nbsp;&nbsp; 根 据 RPG 游戏 改编 , 故事 讲述 的 是 平凡 少年 遂 遥 与 婢 娘 相依 为 命 , 经 营 着 一 家 小 客栈 。 
有 一 天 ， 婕 婕 突然 生 了 重病 ， 焦 急 的 遵 遥 前往 仙 灵 岛 寻 
找 解 药 。 仗 着 从 剑 仙 学 得 的 几 招 剑 法 ， 道 腕 踏 上 了 一 段 
危险 重重 的 旅程 ， 开 始 了 一 段 波澜 壮阔 的 冒险 与 奇 ET 
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<! 一 在 页 面 中 居中 插入 两 张 图 片 -> 
<center> 
<!-- 默 认 的 图 片 大 小 一 > 
<img src="pic.jpg"> 
<!-- 设 置 图 片 的 高 度 为 160 像素 -> 
<img src="pic.jpg" height=160> 
</center> 
</body> 
</html> 


运行 这 段 代码 , 可 以 看 到 设置 了 高 度 的 图 片 大 小 ” 尘 Se 


改变 的 效果 ， 如 图 6-2 所 示 。 图 6-2 ”调整 图 片 的 高 度 


6.3.2 图 像 宽度 一 一 width 


图 像 宽 度 的 属性 与 图 像 高 度 类 似 ， 同 样 是 用 来 调整 图 像 大 小 的 。 
语法 : <img src=" 图 像 文件 的 地 址 " width= 图 像 的 宽度 > 
说 明 : 在 该 语法 中 ， 图 像 的 宽度 单位 是 像素 。 如 果 在 使 用 属性 的 过 程 中 ， 只 设置 了 高 度 或 宽度 ， 


则 另外 一 个 参数 会 等 比例 变化 。 如 果 同 时 设置 两 个 属性 ， 且 缩放 比例 不 同 的 情况 下 ， 图 像 很 可 能 会 变 
形 ， 下 面 通 过 实例 说 明 。 


实例 代码 : 

<html> 

<head> 

<title> 设 置 页 面 图 像 大 小 </title> 

</head> 

<body> 
<h3> 轩 辕 剑 三 外 传 : 天 之 痕 </h3> 
<hr size=2> 


&nbsp;&nbsp;&nbsp; 神州 大 地 上 ， 从 神话 时 代 流 传 下 来 十 种 上 古 神器 一 一 钟 、 剑 、 傣 、 壶 、 塔 、 琴 、 桌 、 
印 、 镜 、 石 。 它 们 各 自 有 着 迎 然 不 同 的 绝世 力量 。 只 要 稍 加 利用 即 可 纵横 四 海 ， 无 敌 天 下 。 但 它们 的 下 落 ， 已 削 
灭 于 神州 漫长 之 乱世 历史 中 。<br> 

&nbsp;&nbsp;&nbsp; 除 了 轩辕 剑 ， 还 有 创 世 神 开天辟地 使 用 的 神器 炼 妖 索 ， 在 上 古 英雄 的 手中 轧 转 流传 , 在 
这 些 古 人 的 庇佑 下 ， 中 国 到 了 文化 黑 盛 的 时 代 一 一 隋唐 。<br> 

&nbsp;&nbsp;&nbsp; 公 元 七 世纪 ， 南 北朝 时 期 ， 北 朝 和 皇帝 隋 文 帝 派 兵 消灭 了 南朝 陈 国 后 ,结束 了 中 原 南 北朝 
数 百年 之 分 裂 局 面 ， 重 新 统一 了 中 国 并 成 立 了 隋 国 。 然 而 陈 国 的 遗民 悲痛 祖国 亡 灭 ， 在 江南 集结 大 军 数 万 兴兵 反 
抗 ， 企 图 一 举 复 国 。 隋 文帝 下 令 出 兵 平 乱 ， 然 而 最 令 人 惊讶 的 是 ， 这 支 平 乱 部 队 为 首 竟 是 一 位 身 披 神秘 斗篷 ， 年 
近 十 二 岁 的 少年 。 他 手持 一 把 雕 有 古朴 花纹 的 金色 之 剑 ， 此 乃 十 大 上 十 神器 之 一 一 -轩辕 剑 。 少 年 在 一 击 之 间 , 便 
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将 反抗 朝廷 的 陈 国 数 万 人 马 化 为 飞 灰 ! 自 此 ， 大 隋 威 名 让 所 有 反抗 者 闻 之 色 变 ， 再 没有 人 敢 轻 起 反抗 之 念 。<br> 


&nbsp;&nbsp;&nbsp; 天 之 痕 的 故事 从 十 六 年 后 开始 ， 发 生 在 轩辕 剑 三 的 一 百 三 十 三 年 前 …… 
<br> 

<! 一 在 页 面 中 居中 插入 两 张 图 片 > 

<center> 


<!-- 设 置 图 片 的 宽度 为 160 像素 一 > 
<img src="pic.jpg" width=260> 
<!-- 同 时 设置 图 片 的 高 度 和 宽度 --> 
<img src="pic.jpg" width=260 height=140> 
</center> 
</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 设置 了 宽度 的 图 片 大 小 改变 的 效果 ， 如 图 6-3 所 示 。 在 该 图 中 ， 第 一 张 
图 片 只 设置 了 图 像 的 宽度 ， 因 此 它 被 等 比例 缩小 。 而 在 第 二 张 图 片 中 ， 同 时 设置 了 图 片 的 高 度 和 宽度 ， 
而 且 缩 小 的 比例 不 同 ， 因 此 造成 了 图 片 被 压 扁 的 效果 。 
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图 6-3 设置 图 像 的 大 小 


6.3.3 图 像 边框 一 一 border 


在 默认 情况 下 ， 页 面 中 插入 的 图 像 是 没有 边框 的 ， 可 以 通过 border 属性 为 图 像 添 加 边框 。 
语法 : <img src=" 图 像 文件 的 地 址 " border=" 图 像 边 框 的 宽度 "> 

说 明 : 在 该 语法 中 ，src 是 图 像 文件 的 地 址 ， 是 不 可 缺少 的 。border 的 单位 是 像素 。 
实例 代码 : 


<html> 

<head> 

<title> 设 置 图 像 边框 </title> 

</head> 

<body> 
<h3> 美 女 与 野兽 (Beauty and the Beast) </h3> 
<hr size=2> 


&nbsp;&nbsp;&nbsp; 在 一 个 被 施 了 魔 咒 的 古 堡 里 ， 一 位 王子 因 不 懂得 慈悲 与 宽容 而 被 仙女 变 为 野兽 ， 惟 有 
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他 学 会 如 何 爱人 才能 变 回 原貌 ， 后 来 美女 贝 儿 为 救 父 亲 而 答应 被 野兽 囚禁 ， 在 一 群 魔 堡 仆 役 的 穿针引线 之 下 ， 贝 
儿 与 野兽 从 针锋相对 到 相知 相 守 ， 经 历 了 一 番 波 折 之 后 ， 最 后 才 终于 得 以 解 开 魔法 的 梭 楷 。…… 
<br> 
<! 一 在 页 面 中 居中 插入 两 张 图 片 一 > 
<center> 
<!-- 不 设置 图 片 的 边框 --> 
<img src="pic.jpg"> 
<!-- 设 置 图 片 的 边框 为 5 像素 -> 
<img src="pic.jpg" border="5"> 
</center> 
</body> 
</html> 


运行 这 段 代 码 ， 效 果 如 图 6-4 所 和 示 。 可 以 看 到 在 右 侧 图 像 的 周围 添加 了 边框 的 效果 ， 边 框 的 宽度 
为 5 像素 。 


图 6-4 设置 图 像 的 边框 


6.3.4 图 像 水 平 间距 一 一 hspace 


如 果 不 使 用 <br> 标 记 或 者 <p> 标 记 进行 换行 显示 ,那么 添加 的 图 像 会 紧 跟 在 文字 之 后 。 而 图 像 与 文 
字 之 间 的 水 平 距离 是 可 以 通过 hspace 参数 进行 调整 的 。 通 过 调整 间距 ， 可 以 使 文字 和 图 像 的 排版 不 那 
么 拥挤 ， 看 上 去 更 加 协调 。 

语法 : <img src=" 图 像 文 件 的 地 址 " hspace=" 水 平 间距 "> 

说 明 : 在 该 语法 中 ，src 是 图 像 文 件 的 地 址 ， 是 不 可 缺少 的 。 水 平 间距 hspace 属性 的 单位 是 像素 。 

实例 代码 : 


<html> 
<head> 
<title> 设 置 图 像 的 水 平 间距 </title> 
</head> 
<body> 
<h3> 请 选择 您 喜欢 的 头像 </h3> 
<hr size=2> 
<! 一 在 页 面 中 居中 插入 两 张 图 片 -> 
<!-- 不 设置 图 片 水 平 间距 的 效果 --> 
人 物 头像 <img src="pic01.jpg" border="2"> 
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<img src="pic02.jpg" border="2"> 
<img src="pic03.jpg" border="2"> 
<img src="pic04.jpg" border="2"> 
<br><br> 
<! 一 设置 图 片 的 水 平 间距 为 20 像素 -> 
动物 头像 <img src="pic11.jpg" border="2" hspace="20"> 
<img src="pic12.jpg" border="2" hspace="20"> 
<img src="pic13.jpg" border="2" hspace="20"> 
<img src="pic14.jpg" border="2" hspace="20"> 
</body> 
</html> 


运行 代码 的 效果 如 图 6-5 所 示 ， 其 中 人 物 头 像 一 行 没 有 设置 水 平 间距 ， 图 片 和 文字 紧 紧 连 在 一 起 ; 
在 动物 头像 一 行 设置 了 20 像素 的 间距 ， 图 像 与 文字 就 显得 不 那么 拥挤 了 。 
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图 6-5 设置 图 像 的 水 平 间距 


6.3.5 ”图 像 垂直 间距 一 一 vspace 
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垂直 问 距 参数 vspace 用 来 调整 图 像 与 文字 的 垂直 距离 。 
语法 : <img src=" 图 像 文件 的 地 址 " vspace=" 垂 直 间 距 "> 
说 明 : 在 该 语法 中 ，vspace 属性 的 单位 是 像素 。 

实例 代码 : 


<html> 
<head> 
<title> 设 置 图 像 的 垂直 间距 </title> 
</head> 
<body> 

<img src="picjpg" Vspace="40"> 英 国 著名 的 音乐 剧 超级 天 后 莎 拉 布 莱 曼 的 新 专辑 《伊甸园 》 隆 重 推出 。《 伊 
甸 园 》 共 收录 了 十 五 首 歌曲 ， 曲 风 涵 盖 了 古典 、 跨 界 与 流行 ， 专 辑 中 莎 拉 依旧 保持 她 美 如 天 籁 的 歌声 。<br> 
&nbsp;&nbsp;&nbsp; 英国 著名 的 音乐 剧 超级 天 后 莎 拉 。 布 莱 曼 的 新 专辑 《伊甸园 》 隆 重 推出 。《 伊 甸 园 》 共 收 
录 了 十 五 首 歌曲 ， 曲 风 涵 盖 了 古典 、 跨 界 与 流行 ， 专 辑 中 莎 拉 依 旧 保持 她 美 如 天 籁 的 歌声 。 以 她 最 美丽 的 声音 来 
诠释 这 些 极 富 古典 气息 的 歌曲 ， 相 信 喜 欢 莎 拉 。 布 莱 曼 (Sarah Brightman) 的 歌迷 应 该 不 会 错过 这 张 充满 古典 之 
美的 专辑 。 音 乐 是 她 所 热爱 的 东西 ， 她 自己 的 音乐 也 是 这 样 ，“ 我 演唱 我 热爱 的 音乐 。 如 果 我 变 得 不 诚实 ， 就 不 
再 成 为 音乐 。 你 必须 表达 你 内 心 的 情感 ， 听 众 知道 他 们 是 否 被 欺骗 。” 同 名 主打 歌 《 伊 甸 园 》 由 她 亲自 填词 ， 是 
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她 个 人 最 喜欢 的 作品 之 一 。 


</body> 
</html> 
运行 这 段 代码 ， 效 果 如 图 6-6 所 示 ， 为 图 像 设 置 了 40 像素 的 笠 直 间距 。 
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图 6-6 设置 图 像 的 垂直 间距 


6.3.6 ”图像 相对 于 文字 基准 线 的 对 齐 方式 一 一 align 


图 像 和 文字 之 间 的 排列 方式 可 以 通过 align 参数 来 调整 。 图 像 的 绝对 对 齐 方式 与 相对 文字 的 对 齐 方 
式 不 同 ， 绝 对 对 齐 方式 包括 左 对 齐 、 右 对 齐 和 居中 对 齐 3 种 ， 而 相对 文字 对 齐 方式 则 是 指 图 像 与 一 行 
文字 的 相对 位 置 。 

语法 : <img src=" 图 像 文件 的 地 址 " align=" 相 对 文字 的 对 齐 方 式 "> 

说 明 : 在 该 语法 中 ，align 的 取 值 见 表 6-1。 


表 6-1 图 像 相对 文字 的 对 齐 方式 


align 取 值 表示 的 含义 
top 把 图 像 的 项 部 和 同行 的 最 高 部 分 对 齐 〈 可 能 是 文本 的 顶部， 也 可 能 是 图 像 的 项 部 ) 
middle 把 图 像 的 中 部 和 行 的 中 部 对 齐 〈 通 常 是 文本 行 的 基线 ， 并 不 是 实际 的 行 的 中 部 ) 
bottom 把 图 像 的 底部 和 同行 文本 的 底部 对 齐 
texttop， 把 图 像 的 项 部 和 同行 中 最 高 的 文本 的 项 部 对 齐 ， 常 用 于 Netscape 中 
absmiddle 把 图 像 的 中 部 和 同行 中 最 大 项 的 中 部 对 齐 ， 常 用 于 Netscape 中 
baseline 把 图 像 的 底部 和 文本 的 基线 对 齐 ， 常 用 于 Netscape 中 
absbottom 把 图 像 的 底部 和 同行 中 的 最 低 项 对 齐 ， 常 用 于 Netscape 中 
left 使 图 像 和 左边 界 对 齐 ( 文 本 环绕 图 像 ) 
right 使 图 像 和 右边 界 对 齐 〈 文 本 环绕 图 像 ) 
在 表 中 ，Netscape 支持 texttop、baseline、absmiddle 和 absbottom 的 取 值 。 
实例 代码 : 
<html> 
<head> 


<title> 设 置 图 像 与 文字 的 相对 位 置 </title> 
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</head> 
<body> 

<font size=4> 作 为 基准 的 文字 </font> 

<!-- 图 像 的 底 端 与 文字 的 底 端 对 齐 --> 

<img src="pic.gif" width=85 align="bottom"> 

<!-- 图 像 的 中 间 与 文字 的 中 间 线 对 齐 -> 

<img src="pic.gif" width=85 align="middle"> 

<!-- 图 像 的 顶端 与 文字 的 顶端 对 齐 --> 

<img src="pic.gif" width=85 align="texttop"> 

<!-- 图 像 的 中 间 线 与 文字 的 中 间 线 对 齐 --> 

<img src="pic.gif" width=85 align="absmiddle"> 

<!-- 图 像 的 底 端 与 文字 的 底 端 对 齐 --> 

<img src="pic.gif" width=85 align="baseline"><br> 

<hr size=2> 

下 面 显示 图 像 位 于 文字 左 侧 的 效果 : <br><br> 

<img src="pic.gif' align="left"> 本 实例 讲解 的 是 关于 图 像 与 文字 的 相对 位 置 的 设置 , 文字 作为 图 像 对 齐 效果 的 
参照 物 。 如 果 将 图 像 的 对 齐 方式 设置 成 left 或 者 right， 图 像 则 会 与 文字 进行 环绕 显示 。 这 是 图 像 设置 为 left 的 效 
果 。<br><br><br> 

下 面 显示 图 像 位 于 文字 右 侧 的 效果 : <br><br> 

<img src="pic.gif" align="right"> 本 实例 讲解 的 是 关于 图 像 与 文字 的 相对 位 置 的 设置 ， 文 字 作为 图 像 对 齐 效果 
的 参照 物 。 如 果 将 图 像 的 对 齐 方式 设置 成 left 或 者 right， 图 像 则 会 与 文字 进行 环绕 显示 。 这 是 图 像 设置 为 right 的 
效果 。<br><br> 
</body> 
</html> 


运行 这 段 代 码 ， 可 以 看 到 在 水 平 线 上 面 是 文字 与 图 像 的 相对 垂直 位 置 的 变化 效果 ， 而 在 水 平 线 下 
面 ， 则 是 左 对 齐 和 右 对 齐 的 效果 ， 如 图 6-7 所 示 。 


EL 


图 6-7 设置 图 像 与 文字 的 相对 位 置 
6.3.7 图像 的 提示 文字 一 一 alt 


如 果 网 络 上 观看 Web 站 点 的 人 使 用 了 一 个 非 图 像 化 的 浏览 器 ,或 者 为 了 加 快 浏览 器 速度 关 掉 了 图 
像 显 示 ， 这 时 候 提 示 文 字 就 可 以 起 作用 了 。 当 图 像 没有 装载 到 浏览 器 上 时 ， 就 会 显示 添加 的 提示 文字 ， 
而 下 载 图 像 之 后 ， 当 鼠标 停留 在 图 像 上 方 时 也 会 显示 出 提示 文字 ， 这 一 功能 通过 alt 属性 来 实现 。 

语法 : <img src=" 图 像 文字 的 地 址 " al=" 提 示 文 字 的 内 容 "> 

说 明 : 在 该 语法 中 ， 提 示 文 字 的 内 容 可 以 是 中 文 ， 也 可 以 是 英文 。 
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实例 代码 : 


<html> 
<head> 
<title> 为 图 像 添加 提示 文字 </title> 
</head> 
<body> 
<h3> 史 密斯 夫妇 一 一 Mr. and Mrs. Smith</h3> 

<img src="picjpg" hspace="20" align=left alt=" 这 是 6 月 6 日 发 布 的 由 美国 影星 布 拉 德 皮特 ( 右 ) 和 安吉 丽 
娜 朱 莉 主演 的 影片 《史密斯 夫妇 》 的 海报 。 该 影片 将 于 2005 年 6 月 10 日 在 全 美 上 映 。"> 影 片 介绍 : 布 拉 德 皮特 
和 安吉 丽 娜 朱 莉 所 扮演 的 史密斯 夫妇 在 外 人 眼 里 是 一 对 令 人 羡慕 的 夫妻 ， 他 们 家 境 优越 ， 夫 妻 恩爱 。 但 多 年 的 夫 
妻 生活 却 多 少 魔 平 当初 的 激情 ， 而 多 些许 平淡 与 乏味 ， 而 这 一 切 都 仅仅 是 假象 而 已 ， 这 夫妇 二 人 都 是 受过 专业 训 
练 ， 身 经 百 战 ， 杀 人 无 数 的 职业 杀手 。 他 们 各 自 效力 于 对 立 的 两 个 秘密 组 织 ， 可 能 由 于 双方 都 是 伪装 技法 高 超 的 
超级 杀手 ， 虽 然 同室 而 居 七 年 有 余 ， 但 各 自 却 对 对 方 的 秘密 身份 知之 甚 少 。 而 在 一 次 执行 刺杀 任务 中 ， 夫 妇 二 人 
恰好 被 同时 指派 去 刺杀 同一 个 目标 ， 这 使 得 二 人 为 完成 任务 不 得 不 同室 操 戈 ， 而 结果 却 是 两 败 俱 伤 。 为 了 找到 导 
致 自己 任务 失败 的 对 方 ， 夫 妇 俩 开始 调动 一 切 资源 调查 对 方 的 身份 ， 而 随 着 调查 的 深入 ， 越 来 越 多 的 证 据 指 向 同 
自己 生活 多 年 的 爱人 ， 因 此 ， 夫 妻 二 人 的 猜疑 和 试探 也 越 加 深入 ， 直 到 妻子 在 晚餐 中 无 意 将 自己 敏捷 的 身手 暴露 
给 同 是 内 行 的 杀手 丈夫 ， 之 后 …… 
</body> 
</html> 


运行 这 段 代 码 ， 当 鼠标 位 于 图 像 上 面 时 可 以 看 到 添加 的 说 明文 字 ， 如 图 6-8 所 示 。 
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图 6-8 图 像 的 提示 文字 


6.4 “图像 的 超 链接 


除了 文字 可 以 添加 超 链 接 之 外 ， 图 像 也 可 以 设置 超 链接 属性 。 而 一 幅 图 像 可 以 切 分 成 不 同 的 区 域 
设置 链接 ， 而 这 些 区 域 被 称 为 热 区 。 因 此 一 幅 图 像 也 就 可 以 设置 多 个 链接 地 址 。 


6.4.1 设置 图 像 的 超 链 接 
对 于 给 整个 一 幅 图 像 文件 设置 超 链 接 来 说 ， 方 法 比较 简单 ， 与 文本 链接 类 似 。 


语法 : <A hre 全 "链接 地 址 " target=" 目 标 窗口 的 打开 方式 "><img src=" 图 像 文 件 的 地 址 "></A> 
说 明 : 在 该 语法 中 ，href 参数 用 来 设置 图 像 的 链接 地 址 ， 而 在 图 像 属 性 中 可 以 添加 图 像 的 其 他 参 
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数 ， 如 height、border、hspace 等 。 

下 面 设 置 一 个 实例 ， 该 实例 的 第 一 个 页 面 index.html 是 一 幅 中 国 地 图 ， 单 击 该 页 面 中 的 图 像 ， 可 
以 链接 到 一 个 介绍 中 国 的 文字 页 面 china.html。 

实例 中 index.html 文件 的 代码 如 下 : 


<html> 

<head> 

<title> 为 图 像 添加 超 链接 </title> 

</head> 

<body> 

<h3> 中 国 是 个 优秀 的 国家 </h3> 
<center> 

<A href="china.html"><img src="map.jpg" hspace="10" alt=" 中 国 "></A> 

</center> 

</body> 

</html> 


实例 中 china.html 文件 的 代码 如 下 : 


<html> 
<head> 
<title> 给 图 像 添加 超 链 接 </title> 
</head> 
<body> 
&nbsp; &nbsp; &nbsp; &nbsp; 中 华人 民 共 和 国 ， 简 称 中 国 ， 位 于 亚洲 大 陆 东 部 ， 太 平 洋 西岸 。 陆 地 面积 约 
960 万 平方 公里 ， 在 亚洲 ， 是 面积 最 大 的 国家 ， 在 世界 上 ， 是 仅 次 于 俄罗斯 和 加 拿 大 的 第 三 大 国家 。<br> 
&nbsp; &nbsp; &nbsp; &nbsp; 中 国 领土 北 起 黑龙 江 省 漠河 以 北 的 黑龙 江 江 心 ， 南 到 南沙 群岛 的 曾 母 暗沙 ， 南 
北 相距 约 5500 公里 ， 东 起 黑龙 江 与 乌 苏 里 江 的 汇合 处 ， 西 到 帕 米 尔 高 原 ， 东 西 相距 约 5000 公里 。 陆 地 边界 长 约 
2.28 万 公里 。 中 国 临 海 海域 广阔 ， 从 北向 南 依次 是 渤海 、 黄 海 、 东 海 和 南海 ， 海 域 面积 共 约 473 万 平方 公里 。 海 
上 分 布 着 5400 多 个 岛屿 。 中 国 海岸 线 总 长 度 3.2 万 公里 ， 其 中 大 陆 海 岸 线 1.8 万 公里 ， 岛 屿 海岸 线 1.4 万 公里 。 
<br> 
</body> 
</html> 


运行 文件 index.html， 可 以 看 到 打开 的 页 面 中 包含 一 幅 中 国 地 图 ， 当 鼠标 停留 在 图 片上 方 时 , 会 
现 “ 中 国 ” 的 提示 文字 ， 如 图 6-9 所 示 。 
在 图 像 中 单 击 鼠 标 ， 页 面 将 会 跳 转 到 china.html 文件 中 ， 效 果 如 图 6-10 所 示 。 
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图 6-9 图 像 链接 页 面 的 效果 图 6-10 图 像 超 链接 的 跳 转 页 面 
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6.4.2 ”设置 图 像 热 区 链接 


除了 对 整个 图 像 进行 超 链接 的 设置 外 ， 还 可 以 将 图 像 划 分 成 不 同 的 区 域 进 行 链接 设置 。 而 包含 热 
区 的 图 像 也 可 以 称 为 映射 图 像 。 
语法 
首先 需要 在 图 像 文 件 中 设置 映射 图 像 名 ， 在 图 像 的 属性 中 使 用 <usemap> 标 记 添加 图 像 要 引用 的 映 
射 图 像 的 名 称 如 下 : 
<img src=" 图 像 地 址 " usemap=" 映 射 图 像 名 称 "> 
然后 需要 定义 热 区 图 像 以 及 热 区 的 链接 属性 如 下 : 
<map name=" 映 射 图 像 名 称 "> 
<area shape=" 热 区 形状 " coords=" 热 区 坐标 " hre 伍 "链接 地 址 "> 
</map> 
说 明 : 在 该 语法 中 要 先 定义 映射 图 像 的 名 称 ， 然 后 再 引用 这 个 映射 图 像 。 在 <area> 标 记 中 定义 了 
热 区 的 位 置 和 链接 ， 其 中 shape 用 来 定义 热 区 形状 ， 可 以 取 值 为 rect〔 和 矩形 区 域 》、circle〈 圆 形 区 域 ) 
以 及 poly《〈 多 边 形 区 域 ) ， coords 参数 则 用 来 设置 区 域 坐标 ， 对 于 不 同形 状 来 说 ，coords 设置 的 方式 
也 不 同 。 
对 于 和 矩形 区 域 rect 来 说 ，coords 包含 4 个 参数 ， 分 别 为 left、top、right 和 bottom， 也 可 以 将 这 4 
个 参数 看 作 和 矩形 两 个 对 角 的 点 坐标 ; 对 于 圆 形 区 域 circle 来 说 ，coords 包含 3 个 参数 ， 分 别 为 center-x、 
center-y 和 tadius， 也 可 以 看 作 是 圆 形 的 圆心 坐标 (x，y) 与 半径 的 值 ， 对 于 多 边 形 区 域 poly 设置 坐标 
参数 比较 复杂 ， 跟 多 边 形 的 形状 息息相关 。coords 参数 需要 按照 顺序 (可 以 是 逆 时 针 ， 也 可 以 是 顺 时 
针 ) 取 各 个 点 的 x、y 坐标 值 。 
由 于 定义 坐标 比较 复杂 而 且 难 以 控制 ， 一 般 情况 下 都 使 用 可 视 化 软件 进行 这 种 参数 的 设置 。 上 有 具体 
方法 如 下 : 
(1) 编写 一 个 HTML 文件 ， 代 码 如 下 : 
<html> 
<head> 
<title> 给 图 像 添加 超 链接 </title> 
</head> 
<body> 
<h3> 中 国 是 个 优秀 的 国家 </h3> 
<center> 
<img src="map.jpg" hspace="10"><br><br> 
</center> 
<hr color="#990000" size=3><br><br> 
&nbsp; &nbsp; &nbsp; &nbsp; 中 华人 民 共和 国 ， 简 称 中 国 ， 位 于 亚洲 大 陆 东 部 ， 太 平 洋 西岸 。 陆 地 面积 约 
960 万 平方 公里 ， 在 亚洲 ， 是 面积 最 大 的 国家 ， 在 世界 上 ， 是 仅 次 于 俄罗斯 和 加 拿 大 的 第 三 大 国家 。<br> 
&nbsp; &nbsp; &nbsp; &nbsp; 中 国 领 土 北 起 黑龙 江 省 漠河 以 北 的 黑龙 江 江 心 ， 南 到 南沙 群岛 的 曾 母 暗沙 ， 南 
北 相距 约 5500 公里 ， 东 起 黑龙 江 与 乌 苏 里 江 的 汇合 处 ， 西 到 帕 米 尔 高 原 ， 东 西 相距 约 5000 公里 。 陆 地 边界 长 约 
2.28 万 公里 。 中 国 临海 海域 广阔 ， 从 北向 南 依次 是 渤海 、 黄 海 、 东 海 和 南海 ， 海 域 面积 共 约 473 万 平方 公里 。 海 
上 分 布 着 5400 多 个 岛屿 。 中 国 海岸 线 总 长 度 3.2 万 公里 ， 其 中 大 陆 海 岸 线 1.8 万 公里 ， 岛 屿 海岸 线 1.4 万 公里 。 
<br> 
&nbsp; &nbsp; &nbsp; &nbsp; 中 国 行政 区 包括 省 、 直 辖 市 、 自 治 区 以 及 特别 行政 区 。 直 辖 市 的 行政 地 位 相当 
于 省 级 ， 目 前 我 国 直辖 市 的 数目 为 4 个 ， 分 别 为 北京 、 上 海 、 天 津 、 重 庆 。<br><br> 
<font color="#990066" size=4><a name="beijing"> 北 京 </a></font><br> 
&nbsp; &nbsp; &nbsp; &nbsp; 北京 是 我 国 的 首都 ， 全 国 的 政治 、 文 化 中 心 和 国际 交往 的 枢纽 ， 也 是 一 座 著 
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名 的 “历史 文化 名 城 ”。 北 京 位 于 华北 平原 的 最 北端 ， 西 与 黄土 高 原 相 邻 ， 北 与 内 蒙古 高 原 相 接 ， 处 于 高 原 相 接 、 
山地 和 平原 衔接 部 。 北 京 地 处 温带 半 干 旱 、 半 湿润 季风 和 气候 区 ， 四 季 分 明 。 北 京 有 着 大 气 ， 严 肃 ， 正 统 而 又 不 失 
闲适 、 清 雅 的 文化 氛围 。<br><br> 

<font color="#990066" size=4><a name="tianjin"> 天 津 </a></font><br> 

&nbsp; &nbsp; &nbsp; &nbsp; 天 津 市 简称 津 ， 地 处 华北 平原 东北 部 ， 渤 海 之 滨 ， 素 有 渤海 阴 珠 之 称 。 天 津 
紫 邻 首都 北京 ， 是 海上 通 往 北京 的 咽喉 要 道 ， 自 古 就 是 京师 门户 ， 堆 辅 重镇 。 天 津 是 华北 的 一 大 工业 城市 ， 是 华 
北 重要 商业 中 心 和 口岸 城市 ， 油 气 、 海 盐 资源 丰富 ， 又 有 一 定 的 工业 技术 基础 。 天 津 的 旅游 景点 以 人 文 景观 为 主 ， 
以 自然 景观 为 辅 ， 主 要 由 三 个 部 分 组 成 : 以 海河 为 轴线 的 市 中 心 旅游 区 ， 以 名 胜 古迹 见长 的 萄 县 旅游 区 和 以 滨海 
观光 为 特色 的 塘沽 旅游 区 。<br><br> 

<font color="#990066" size=4><a name="shanghai" > 上 海 </a></font><br> 

&nbsp; &nbsp; &nbsp; &nbsp; 上 海地 处 长 江 三 角 洲 前 沿 ， 倚 东海 之 滨 ， 向 东 是 浩瀚 无 霓 的 太平 洋 、 与 美国 
的 西海 岸 隔 海 相 望 ， 南 临 杭州 湾 ， 西 与 富庶 的 江苏 、 浙 江 两 省 毗邻 ， 北 界 黄金 水 道 长 江 入 海口 ， 正 当 我 国 南北 海 
岸 线 的 中 部 ， 交 通 便利 ， 地 理 位 置 十 分 优越 ， 是 世界 第 三 大 港 和 中 国 最 大 的 港口 。 上 海 虽然 尚 没有 雄伟 的 名 山大 
川 、 奇 峰 异 谷 ， 也 无 世界 奇迹 之 类 的 名 胜 古 迹 ， 但 是 ， 多 少年 来 一 直 以 她 独 有 的 风韵 吸引 着 无 数 的 中 外 游客 。 她 
是 一 个 不 断 发 展 日 渐 强盛 的 城市 ,是 我 国 最 大 的 商业 、 金 融 中 心 , 也 是 西 太平 洋 地 区 重要 的 国际 港口 城市 .<br><br> 

<font color="#990066" size=4><a name="chongqing"> 重 庆 </a></font><br> 

&nbsp; &nbsp; &nbsp; &nbsp; 重庆 位 于 青藏 高 原 与 长 江 中 下 游 平原 的 过 渡 地 带 。 气 候 属 亚热带 季风 性 湿润 
气候 ， 冬 暖 夏 热 ， 无 霜 期 长 、 雨 量 充沛 、 温 润 多 阴 、 雨 热 同 季 。 重 庆 地 处 我 国 中 西 结 合 部 ， 是 承 东 启 西 、 左 右 传 
递 的 枢纽 ， 在 我 国 经 济 发 展 总 格局 和 西部 大 开发 中 ， 具 有 重要 的 战略 地 位 和 作用 。 重 庆 中 心 城区 为 长 江 、 嘉 陵 江 
所 环抱 , 夹 两 江 、 拥 群 山 , 山清水秀， 风景 独特 ， 各 类 建筑 依 山 傍 水 ， 鳞 次 梢 比 ， 错 落 有 致 ， 素 以 美丽 的 “山城 ”、 
“江城 ”著称 于 世 。 北 有 大 巴山 ， 东 有 巫山 ， 东 南 有 武陵 山 ， 南 有 大 类 山 ， 地 形 大 势 由 南北 向 长 江河 谷 倾斜 ， 起 
伏 较 大 。 地 瑶 以 丘陵 、 山 地 为 主 ， 坡 地 面积 较 大 ， 成 层 性 上 明显， 分布 着 典型 的 石林 、 峰 林 、 溶 洞 、 峡 谷 等 喀斯特 
景观 。 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
</body> 
</html> 


(2) 启动 Dreamweaver MX 2004， 选 择 “ 文 件 ”|“ 打 开 ” 命 令 ， 弹 出 “打开 ”对 话 框 ， 在 对 话 框 
中 选择 刚才 编写 的 HTML 文件 ， 单 击 “ 打 开 ” 按 钮 打开 HTML 文件 ， 效 果 如 图 6-11 所 示 。 

(3) 在 属性 面板 中 设置 “地 图 ”的 值 为 map， 也 就 是 定义 图 像 要 引用 的 映射 图 像 名 。 

(4) 为 了 显示 各 种 热 区 的 效果 ,这 里 将 不 同 的 热 区 设置 为 不 同 的 形状 。 选 择 “ 拢 形 热点 工具 ”加 
拖 动 鼠标 左 键 在 北京 的 位 置 上 绘制 出 一 个 矩形 区 域 ， 如 图 6-12 所 示 。 
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图 6-11 打开 的 文件 6-12 ”绘制 矩形 区 域 
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(5) 在 “链接 ”文本 框 中 添加 链接 地 址 “#beijing”， 在 “替代 ”文本 框 设置 选区 的 提示 文字 为 
“北京 ”。 

(6) 再 次 单 击 图 片 ， 选 择 “ 多 边 形 热点 工具 ”， 依 次 单 击 热 区 的 各 个 点 创建 一 个 多 边 形 选 区 ， 如 
图 6-13 所 示 。 

(7) 在 属性 面板 中 设置 链接 地 址 为 “#tianjn”， 设 置 提示 文字 为 “天 津 ”。 

(8) 用 同样 的 方法 设置 两 个 椭圆 形 选 区 ， 分 别 设置 链接 地 址 为 “#shanghai” 和 “#chongqing”; 
然后 设置 对 应 的 提示 文字 为 “上海” 和 “重庆 ”。 

(9) 完成 后 保存 文件 ， 使 用 浏览 器 运行 这 个 文件 。 当 鼠标 位 于 某 一 个 热 区 上 方 时 ， 会 出 现 该 热 区 
的 提示 文字 与 链接 标志 也 ， 效 果 如 图 6-14 所 示 。 


图 6-13 绘制 多 边 形 选区 图 6-14 运行 文件 的 效果 


单 击 上 海 所 在 的 热 区 ， 将 会 自动 跳 转 到 关于 上 海 的 介绍 文字 的 位 置 ， 如 图 6-15 所 示 。 运 行 其 他 热 
区 的 效果 类 似 ， 这 里 不 再 列举 。 
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图 6-15 ” 跳 转 到 热 区 的 链接 地 址 


重新 打开 源 文 件 ， 可 以 看 到 在 源 文件 添加 图 像 的 代码 中 增加 了 部 分 内 容 。 在 原来 的 文件 代码 中 插 
入 图 像 的 代码 如 下 : 
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<img src="map.jpg" hspace="10"><br><br> 


这 是 位 于 标记 <center> 与 </center> 之 间 的 内 容 ， 而 增加 后 的 代码 如 下 : 


<img src="map.jpg" hspace="10" border="0" usemap="#map"> 
<map name="map"> 
<area shape="rect" coords="398,168,420,190" href="#beijing" alt=" 北 京 "> 
<areashape="poly"coords="413,194,419,188,423,192,423,197,443,197,442,209,422,208,414,201" 
href="#ianjin" alt=" 天 津 "> 
<area shape="circle" coords="317,323,17" href="#chongqing" alt=" 重 庆 "> 
<area shape="circle" coords="485,299,17" href="#shanghai" alt=" 上 海 "> 
</map> 
<br><br> 


这 段 代码 就 是 设置 热 区 的 关键 代码 ， 在 这 段 代码 中 设置 了 4 个 不 同形 状 的 热 区 ， 并 分 别 为 这 些 热 
区 设 定 了 链接 地 址 和 提示 文字 。 
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六 ”向 置 动态 文字 
MW 向 置 背 景 音 乐 
风琴 加 多 媒体 文件 


多 媒体 是 一 个 网 站 的 必 备 元 素 , 使 用 它 可 以 丰富 网 站 效果 , 体现 设计 者 的 个 
性 , 吸引 用 户 的 注意 ,突出 重点 。 通 常 多 媒体 元 素 包括 声音 和 动画 两 部 分 ， 本 章 
将 详细 介绍 。 
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7.1 设置 动态 文字 


网 页 的 多 媒体 元 素 一 般 包 括 动态 文字 、 动 态 图 像 、 声 音 以 及 动画 等 ， 其 中 最 简单 的 就 是 添加 一 些 
滚动 文字 。 


7.1.1 设置 滚动 文字 一 一 marquee 


使 用 marquee 标记 可 以 将 文字 设置 为 动态 滚动 的 效果 。 

语法 <marquee> 滚 动 文 字 </marquee> 

说 明 : 只 要 在 标记 之 间 添 加 要 进行 滚动 的 文字 即 可 ， 而 且 可 以 在 标记 之 间 设 置 这 些 文字 的 字体 、 
颜色 等 。 

实例 代码 : 


<html> 
<head> 
<title> 设 置 滚动 文字 </title> 
</head> 
<body> 

<marquee> 

<font face=" 隶 书 " color="#CC0000 " size=4> 你 好 ， 欢 迎 光临 梦幻 小 屋 ! 这 里 有 欢乐 的 歌声 ， 这 里 有 美好 

的 景色 </font> 

</marquee> 
</body> 
</html> 


运行 这 段 代 码 ， 可 以 看 到 设置 为 红色 隶书 的 文字 从 浏览 器 的 右 方 缓 缓 向 左 滚动 ， 如 图 7-1 所 示 。 
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图 7-1 设置 滚动 文字 


7.1.2 “文字 滚动 方向 一 一 direction 


默认 情况 下 文字 只 能 是 从 右 向 左 滚动 ， 而 在 实际 应 用 中 常常 需要 不 同 滚动 方向 的 文字 ， 这 可 以 通 
过 direction 参数 来 设置 。 

语法 : <marquee direction= "滚动 方向 "> 滚动 文字 </marquee> 

说 明 : 该 语法 中 的 滚动 方向 可 以 包含 4 个 取 值 ， 分 别 为 up、down、left 和 right， 它 们 分 别 表示 文 
字 向 上 、 向 下 、 向 左 和 向 右 滚动 ， 其 中 向 左 滚动 left 的 效果 与 默认 效果 相同 ， 而 向 上 滚动 的 文字 则 常 
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常 出 现在 网 站 的 公告 栏 中 。 
实例 代码 : 


<html> 
<head> 
<title> 设 置 滚动 文字 </title> 
</head> 
<body> 
<marquee direction="up"> 
<font color="#3300FF" face=" 楷 体 _GB2312"> 
你 好 ， 欢 迎 您 的 光临 <br> 
这 里 是 梦想 小 屋 <br> 
让 我 们 与 您 分 享 您 的 点 点 快乐 <br> 
让 我 们 与 您 分 担 您 的 片 片 忧 伤 <br> 
</font> 
</marquee> 
<marquee direction="down"> 
<font color="#FF0000" face=" 楷 体 _GB2312"> 
你 好 ， 欢 迎 您 的 光临 <br> 
这 里 是 梦想 小 屋 <br> 
让 我 们 与 您 分 享 您 的 点 点 快乐 <br> 
让 我 们 与 您 分 担 您 的 片 片 忧 伤 <br> 
</font> 
</marquee> 
</body> 
</html> 


运行 这 段 代 码 ， 可 以 看 到 文字 不 同 的 滚动 效果 ， 如 图 7-2 和 图 7-3 所 示 。 图 中 两 段 文字 的 感觉 就 像 
是 从 中 间 被 拉扯 开 一 样 。 
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图 7-2 设置 滚动 方向 图 7-3 运行 一 段 时 间 的 效果 


如 果 将 文字 方向 相反 设置 ， 也 就 是 上 面 一 段 文字 的 direction 设置 为 down， 下 面 一 段 设 置 为 up， 
运行 结果 就 似乎 是 两 组 文字 融合 到 一 起 一 样 。 
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7.1.3 设置 文字 的 滚动 方式 一 behavior 


除了 将 文字 设置 为 单方 向 的 滚动 外 ， 还 可 以 为 文字 设置 滚动 方式 ， 如 往复 运动 等 。 这 一 功能 可 以 
通过 添加 behavior 属性 来 实现 。 

语法 : <marquee behavior= "滚动 方 式 "> 滚动 文字 </marquee> 

说 明 : 在 这 里 ， 滚 动 方式 behavior 的 取 值 可 以 设置 为 表 7-1 中 所 示 的 某 个 值 ， 不 同 取 值 的 滚动 效 
果 也 不 相同 。 


表 7-1 滚动 方式 的 设置 


behavior 的 取 值 滚动 的 效果 
scroll 循环 滚动 ， 默 认 效 果 
slide 只 滚动 一 次 就 停止 
alternate 来 回 交替 进行 滚动 
实例 代码 ; 
<html> 
<head> 
<title> 设 置 滚动 文字 </title> 
</head> 
<body> 
<marquee behavior="scroll"> 你 好 ， 欢 迎 您 的 光临 </marquee> 
<br><br> 
<marquee behavior ="slide"> 让 我 们 与 您 分 享 您 的 点 点 快乐 </marquee> 
<br><br> 
<marquee behavior ="altemate"> 让 我 们 与 您 分 担 您 的 片 片 忧伤 </marquee> 
</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 如 图 7-4 所 示 的 效果 。 其 中 第 一 行文 字 不 停 地 循环 ， 一 圈 一 圈 地 滚动 
而 第 二 行文 字 则 在 第 一 次 到 达 浏 览 器 边缘 时 就 停止 了 滚动 ， 最 后 一 行文 字 则 在 滚动 到 浏览 器 左边 缘 后 
开始 反方 向 运动 。 
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图 7-4 设置 滚动 方式 
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7.1.4 循环 设置 一 一 loop 


设置 滚动 文字 后 ， 在 默认 情况 下 会 不 断 地 循环 下 去 ， 如 果 希 望 文字 滚动 儿 次 停止 ， 可 以 使 用 loop 
参数 来 进行 设置 。 

语法 : <marquee loop=" 循 环 次 数 "> 滚动 文字 </marquee> 

实例 代码 : 


<html> 
<head> 
<title> 设 置 滚动 文字 </title> 
</head> 
<body> 
<marquee direction="up" loop="3"> 
<font color="#3300FF" face=" 楷 体 _GB2312"> 
你 好 ， 欢 迎 您 的 光临 <br> 
这 里 是 梦想 小 屋 <br> 
让 我 们 与 您 分 享 您 的 点 点 快乐 <br> 
让 我 们 与 您 分 担 您 的 片 片 忧 伤 <br> 
</font> 
</marquee> 
</body> 
</html> 


运行 这 段 代 码 ， 会 发 现 当 文字 滚动 3 个 循环 之 后 ， 深 动 文字 将 不 再 出 现 ， 如 图 7-5 所 示 。 但 是 如 
果 设 置 滚动 方式 为 交替 滚动 ， 那 么 在 滚动 3 个 循环 之 后 ， 文 字 将 停留 在 窗口 中 ， 如 图 7-6 所 示 。 
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图 7.5 设置 循环 次 数 的 效果 图 7-6 设置 交替 滚动 的 循环 次 数 
7.1.5 滚动 速度 一 一 scrollamount 


在 设置 滚动 文字 时 ， 有 时 候 可 能 希望 它 快 一 些 ， 也 有 时 候 希 望 它 慢 一 些 。 这 一 功能 可 以 使 用 
scrollamount 参数 来 实现 。 
语法 : <marquee scrollamoun 人 滚动 速度 ></marquee> 


说 明 : 在 该 语法 中 ， 深 动 文字 的 速度 实际 上 是 设置 滚动 文字 每 次 移动 的 长 度 ， 以 像素 为 单位 。 
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实例 代码 : 


<html> 

<head> 

<title> 设 置 滚动 文字 </title> 

</head> 

<body> 
<marquee scrollamount=3> 看 看 我 走 得 速度 怎么 样 ! </marquee><br><br> 
<marquee scrollamount=10> 看 看 我 走 得 速度 怎么 样 ! </marquee><br><br> 
<marquee scrollamount=50> 看 看 我 走 得 速度 怎么 样 ! </marquee> 

</body> 

</html> 


运行 这 段 代码 , 可 以 看 到 3 行文 字 同 时 开始 滚动 , 但 是 速度 是 不 一 样 的 , 设置 的 scrollamount 越 大 ， 
速度 也 就 越 快 ， 如 图 7-7 所 示 。 
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看 看 我 走 得 连 度 怎么 样 ? 


图 7-7 设置 不 同 的 滚动 速度 
7.1.6 滚动 延迟 一 一 scrolldelay 


scrolldelay 参数 可 以 设置 滚动 文字 滚动 的 时 间 间 隅 。 

语法 : <marquee scrolldelay= 时 间 间 隔 ></marquee> 

说 明 : scrolldelay 的 时 间 间 隔 单位 是 毫秒 ， 也 就 是 千 分 之 一 秒 。 这 一 时 间 间 隔 的 设置 为 滚动 两 步 之 
间 的 时 间 间 隔 ， 如 果 设 置 的 时 间 比 较 长 ， 会 产生 走 走 停 停 的 效果 。 

如 果 与 滚动 速度 scrollamount 参数 结合 使 用 ， 效 果 更 明显 ， 下 面 以 实例 说 明 。 

实例 代码 : 


<html> 

<head> 

<title> 设 置 滚动 文字 </title> 

</head> 

<body> 
<marquee scrollamount=100 scrolldelay =10> 看 我 不 停 脚 步 得 走 ! </marquee><br><br> 
<marquee scrollamount=100 scrolldelay =100> 看 我 走 走 吹 吹 ! </marquee><br><br> 
<marquee scrollamount=100 scrolldelay =500> 我 要 走 一 步 停 一 停 </marquee> 

</body> 

</html> 
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运行 这 段 代 码 ， 效 果 如 图 7-8 所 示 ， 其 中 第 一 行文 字 设 置 的 延迟 小 ， 因 此 走 起 来 比较 平滑 ; 最 后 
一 行 设置 的 延迟 比较 大 ， 看 上 去 就 像 是 走 一 步 欧 一 会 儿 的 感觉 。 


看 我 不 停 即 步 得 走 ! 
咎 我 走 走 歌 炽 【 
我 要 走 一 步 停 一 停 
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图 7-8 设置 滚动 延迟 


7.1.7 滚动 文字 的 背景 设置 一 bgcolor 


在 网 页 中 ， 为 了 突出 某 部 分 内 容 ， 常 常 使 用 不 同 背景 色 来 显示 。 滚 动 文字 也 可 以 单独 设置 背景 色 。 
语法 <marquee bgcolor=-" 颜 色 代 码 "> 滚动 文字 </marquee> 

说 明 : 文字 背景 颜色 设置 为 16 位 颜色 码 。 

实例 代码 : 


<html> 
<head> 
<title> 设 置 滚动 文字 </title> 
</head> 
<body> 
<marquee behavior ="altemate" bgcolor="#FFFF66"> 
这 里 是 梦幻 小 屋 ， 欢 迎 光临 
</marquee> 
<br><br> 
<marquee py TS Be 
尔 好 ， 欢 迎 您 的 <br> 由 [| 
这 里 是 梦想 小 屋 <br> [| 
让 我 们 与 您 分 享 您 的 点 点 快乐 <br> 址 时 和 小 区 ,交办 加 
让 我 们 与 您 分 担 您 的 片 片 忧伤 <br> 


</marquee> 
bodrr sy 


</html> 
运行 这 段 代 码 ， 看 到 在 滚动 文字 后 面 设 置 了 淡 蓝 色 的 ”三 [CE 一 
背景 ， 如 图 7-9 所 示 。 图 7-9 设置 滚动 文字 背景 


7.1.8 滚动 背景 面积 一 一 width、height 


如 果 不 设 置 滩 动 背景 的 面积 ， 那 么 默认 情况 下 ， 水 平 滚动 的 文字 背景 与 文字 同 高 、 与 浏览 器 窗口 
同 宽 ， 使 用 width 和 height 参数 可 以 调整 其 水 平和 垂直 的 范围 。 
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语法 : <marquee width= 背 景 宽度 height= 背 景 高 度 > 深 动 文字 </maruquee> 


说 明 : 此 处 设置 宽度 和 高 度 的 单位 均 为 像素 。 
实例 代码 : 


<html> 
<head> 
<title> 设 置 滚动 文字 </title> 
</head> 
<body> 
<marquee behavior =" alternate" bgcolor="#99CCFF"> 
这 里 是 梦幻 小 屋 ， 欢 迎 光临 
</marquee><br><br> 
<marquee behavior="alternate"bgcolor="#99CCFF" width=500 
height=50> 
这 里 是 梦幻 小 屋 ， 欢 迎 光临 
</marquee> 
</body> 
</html> 


运行 这 段 代码 , 可 以 看 到 两 段 滚动 文字 的 背景 高 度 和 宽度 的 
变化 ， 如 图 7-10 所 示 。 


7.1.9 ”设置 空白 空间 一 一 hspace、vspace 
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图 7-10 设置 滚动 文字 背景 的 面积 


默认 情况 下 ， 深 动 文字 周围 的 文字 或 图 像 是 与 滚动 背景 紧密 连接 的 ， 使 用 参数 hspace 和 vspace 可 


以 设置 它们 之 间 的 空白 空间 。 


语法 : <marquee hspace= 水 平 范围 vspace= 垂 直 范 围 > 滚动 文字 </marquee> 


说 明 : 该 语法 中 水 平和 垂直 范围 的 单位 均 为 像素 。 
实例 代码 : 
<html> 
<head> 
<title> 设 置 滚动 文字 </title> 
</head> 
<body> 
和 设置 空白 空间 的 效果 : 
<marquee behavior ="alternate" bgcolor="#9999FF "> 
这 里 是 梦幻 小 屋 ， 欢 迎 光临 
</marquee> 
到 这 里 ， 留 下 你 的 忧伤 ， 带 走 我 的 快乐 ! 
<br> 
<hr color="#FF0000"> 
<br> 
设置 水 平 为 70 像素、 垂直 为 50 像素 的 空白 空间 : 


<marquee behavior ="altemate" bgcolor="#9999FF " hspace=70 vspace=50> 


这 里 是 梦幻 小 屋 ， 欢 迎 光临 


</marquee> 
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我 的 梦想 与 你 同 在 ! 
</body> 
</html> 


> 


了 这 段 代码 ， 可 以 看 到 设置 空白 空间 的 效果 如 图 7-11 所 示 。 
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语 轩 水 平 为 70 和 案 ， 委 喜 为 50 人 的 宇 扣 社 间 , 


玉里 生 扫 困 小 至 ， 下 还 光 谋 
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7-11 设置 滚动 文字 周围 的 空白 空间 


7.2 设置 背景 音乐 


7.2.1 设置 背景 音乐 一 一 bgsound 


在 网 页 中 ， 除 了 可 以 嵌入 普通 的 声音 文件 外 ， 还 可 以 为 某 个 网 页 设置 背景 音乐 。 作 为 背景 音乐 的 
可 以 是 音乐 文件 ， 也 可 以 是 声音 文件 ， 其 中 最 常用 的 是 midi 文件 。 

语法 : <bgsound src= 背 景 音乐 的 地 址 > 

说 明 : 作为 背景 音乐 的 文件 还 可 以 是 avi 文件 、mp3 文件 等 声音 文件 。 

实例 代码 : 


<html> 
<head> 
<title> 设 置 背 景 音乐 </title> 
</head> 
<body> 
<bgsound src="exam02.mid"> 
<center> 
<font face=" 黑 体 " size=5> 醉 花 阴 </font><br> 
<font size=4> 李 清 照 </font> 
</center> 
<hr width=85% size=3> 
<p>&nbspi&nbspi&nbspi&nbsp; 薄 雾 浓 云 愁 永 画 ， 瑞 脑 消 金 兽 。<br> 
&nbsp;&nbsp;&nbsp;&nbsp; 佳 节 又 重阳 ， 玉 枕 纱 厨 ， 半 夜 凉 初 透 。<br> 
&nbspi&nbspi&nbsp;&nbsp; 东 离 把 酒 黄昏 后 ， 有 了 暗 香 盈 袖 。<br> 
&nbsp;&nbsp;&nbsp;&nbsp; 莫 道 不 消魂 ， 帘 卷 西 风 ， 人 比 黄花 瘦 。</p> 
<hr size=5> 
</body> 
</html> 
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运行 这 段 代码 ， 打 开 如 图 7-12 所 示 的 界面 ， 在 打开 界面 之 后 就 可 以 听 到 背景 音乐 。 
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图 7-12 设置 背景 音乐 


7.2.2 设置 背景 音乐 的 循环 播放 次 数 一 一 loop 


通常 情况 下 ， 背 景 音 乐 需要 不 断 地 播放 ， 但 有 时 也 需要 指定 播放 的 次 数 。 这 一 功能 实现 起 来 并 不 
只 要 设置 相应 的 loop 参数 即 可 。 
语法 : <bgsound src= 背 景 音乐 的 地 址 loop= 循 环 次 数 > 
说 明 : 如 果 和 希望 无 限 次 循环 播放 背景 音乐 ， 可 将 循环 次 数 设置 为 true。 
实例 代码 : 


<html> 
<head> 
<title> 设 置 背景 音乐 </title> 
</head> 
<body> 
<bgsound src="exam02.mid" loop=3> 
<center> 
<font face=" 黑 体 " size=5> 醉 花 阴 </font><br> 
<font size=4> 李 清 照 </font> 
</center> 
<hr width=85% size=3> 
<p>&nbsp;&nbsp;&nbsp;&nbsp; 薄 雾 浓 云 愁 永 画 ， 瑞 脑 消 金 兽 。<br> 
&nbsp;&nbsp;&nbsp;&nbsp; 佳 节 又 重阳 ， 玉 枕 纱 厨 ， 半 夜 凉 初 透 。<br> 
&nbsp;&nbsp;&nbsp;&nbsp; 东 离 把 酒 黄昏 后 ， 有 暗 香 盈 袖 。<br> 
&nbsp;&nbsp;&nbsp;&nbsp; 莫 道 不 消魂 ， 帘 卷 西风 ， 人 上 比 黄花 瘦 。</p> 
<hr size=5> 
</body> 
</html> 


运行 这 段 代 码 ， 背 景 音乐 在 循环 播放 3 次 以 后 停止 


7.3 添加 多 媒体 文件 


如 果 能 在 网 页 中 加 入 音乐 或 视频 文件 ， 可 以 使 单调 的 网 页 变 得 更 加 生动 。 但 是 如 果 要 正确 浏览 艇 
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入 了 这 些 文件 的 网 页 ， 就 需要 在 客户 端的 计算 机 中 安装 相应 的 播放 软件 。 使 用 <embed> 标 记 可 以 将 多 
媒体 文件 嵌入 到 网 页 中 。 


7.3.1 添加 多 媒体 文件 标记 一 一 embed 


在 网 页 中 常见 的 多 媒体 文件 包括 声音 文件 和 视频 文件 。 

语法 : <embed src=" 多 媒体 文件 地 址 " width= 播 放 界面 的 宽度 height= 播 放 界面 的 高 度 ></embed> 

说 明 : 在 该 语法 中 ，width 和 height 一 定 要 设置 ， 单 位 是 像素 ， 否则 无 法 正确 显示 播放 多 媒体 文件 
的 软件 。 

实例 代码 : 

<html> 

<head> 


<title> 嵌 入 多 媒体 文件 </title> 
</head> ECTHTIEIEIE LT .| 


Er 
<body> 7 


re CE 
下 面 是 嵌入 的 多 媒体 文件 ，<br> 习 
<embedsrc="exam01.mid"width=500height=200></embed> 
</body> 
</html> 


运行 这 段 代 码 ， 可 以 看 到 一 个 播放 页 面 ， 如 图 7-13 所 示 。 单 
击 页 面 中 的 播放 按钮 辽 可 以 播放 插入 的 声音 文件 exam01.mid。 


Bid 了 局 而 机 


图 7-13 插入 多 媒体 文件 


7.3.2 设置 自动 运行 一 一 autostart 


登录 网 页 时 常常 会 看 到 一 些 视频 文件 直接 开始 运行 ， 不 需要 手动 开始 ， 特 别 是 一 些 广 告 内 容 ， 这 
是 通过 autostart 参数 来 实现 的 。 

语法 : <embed src=" 多 媒体 文件 地 址 " autostart= 是 否 自动 运行 ></embed> 

说 明 : autostart 的 取 值 有 两 个 : 一 个 是 true， 表 示 自 动 播放 ; 另 一 个 是 false， 表 示 不 自动 播放 。 

实例 代码 : 


<html> 

<head> 

<title> 设 置 自动 运行 </title> 

</head> 

<body> 
下 面 的 视频 文件 中 左边 的 视频 文件 将 会 自动 播放 ， 而 右边 的 视频 文件 则 需要 手动 播放 : <br> 
<embedsrc="exam01.avi"width=300 autostart=True></embed> 
<embedsrc="exam01.avi"width=300 autostart=False></embed> 

</body> 

</html> 
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运行 这 段 代 码 ， 可 以 看 到 两 个 视频 文件 的 不 同 效果 ， 如 图 7-14 所 示 。 
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图 7-14 设置 自动 运行 


7.3.3 设置 媒体 文件 的 循环 播放 一 一 loop 


这 里 的 循环 播放 一 般 在 设置 了 自动 播放 时 采用 ， 与 背景 音乐 的 设置 基本 相同 。 
语法 : <embed src=" 多 媒体 文件 地 址 " loop= 是 否 循环 播放 ></embed> 
说 明 : 在 该 语法 中 ，loop 的 取 值 不 是 具体 的 数字 ， 而 是 true 或 者 false， 如 果 取 值 为 true， 表 示 媒 
体 文 件 将 无 限 次 地 循环 播放 ， 如 果 取 值 为 false， 则 只 播放 一 次 。 这 里 的 loop 也 可 以 设置 为 播放 次 数 ， 
但 是 用 途 并 不 广泛 。 
实例 代码 : 
<html> 
<head> 
<title> 设 置 循环 播放 </title> 
</head> 
<body> 
下 面 的 视频 文件 将 循环 播放 : <br> 
<embed src="exam01.avi" width=300 autostart=True loop=True 
></lembed> 
</body> 
</html> 


运行 这 段 代码 ， 效 果 如 图 7-15 所 示 。 
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图 7-15 媒体 文件 不 停 地 循环 播放 


7.3.4 隐藏 面板 一 一 hidden 


其 实 也 可 以 将 媒体 文件 的 声音 保留 而 隐藏 图 像 ， 这 样 就 相当 于 设置 了 背景 声音 。 通 过 hidden 参数 
可 以 隐藏 播放 面板 。 

语法 : <embed src=" 多 媒体 文件 地 址 " hidden= 是 否 隐藏 ></embed> 

说 明 : 在 该 语法 中 ，hidden 可 以 设置 两 个 值 : 一 个 是 true， 表 示 隐 藏 面板 ， 另 一 个 是 false， 表 示 
显示 面板 ， 这 是 添加 媒体 文件 的 默认 选项 。 如 果 要 保留 声音 ， 就 要 设置 文件 的 自动 播放 。 

实例 代码 : 


<html> 
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<head> 

<title> 设 置 隐藏 面板 </title> 

</head> 

<body> TI = 
下 面 的 视频 文件 播放 面板 被 隐藏 ，<br> | a 
<embed src="exam01.avi"width=300 autostart=True hidden=True I 2 S| 

></embed> 下 面 的 文件 播放 面 泊 被 防 茂 ， 

</body> 

</html> 

运行 这 段 代 码 ， 看 到 播放 控制 面板 已 经 不 见 了 ， 只 能 听 到 播放 

的 声音 效果 ， 如 图 7-16 所 示 。 图 7-16 隐藏 播放 面板 


7.3.5 添加 其 他 类 型 的 媒体 文件 


除了 avi 媒体 文件 之 外 ， 在 网 页 中 还 可 以 嵌入 fash、mpeg 等 类 型 的 媒体 文件 ， 方 法 与 avi 媒体 文 
件 相 同 。 
实例 代码 : 
<html> 
<head> 
<title> 嵌 入 多 媒体 文件 </title> 
</head> 
<body> 
下 面 嵌 入 不 同类 型 的 媒体 文件 ，<br> 
<embed src="exam01.swf" width=300></embed> 
<embed src="exam01.mpg" width=300></embed> 
</body> 
</html> 


运行 这 段 代 码 ， 看 到 在 页 面 中 添加 了 两 种 不 同类 型 的 媒体 文件 ， 如 图 7-17 所 示 。 其 中 ， 左 侧 的 媒 
体 文件 为 Flash 类 型 ， 右 侧 的 文件 为 mpeg 类 型 。 
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图 7-17 添加 不 同类 型 的 媒体 文件 
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表格 是 HTML 的 一 项 非常 重要 的 功能 ， 利 用 其 多 种 属性 能 够 设计 出 多 样 化 
的 表格 ， 可 以 说 表格 是 网 页 排版 的 灵 瑰 。 同 时 由 于 表格 包含 的 功能 比较 多 ,读者 
需要 仔细 学 习 才 能 掌权 。 
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8.1 建立 表格 


8.1.1 添加 表格 一 一 table、tr、td 


表格 常用 来 对 页 面 进行 排版 ， 在 表格 中 一 般 通 过 3 个 标记 来 构建 ， 分 别 是 表格 标记 、 行 标记 和 单 
元 格 标记 。 其 中 表格 标记 是 <table> 和 </table>， 表 格 的 其 他 各 种 属性 都 要 在 表格 的 开始 标记 <table> 和 表 
格 的 结束 标记 </table> 之 间 才 有 效 。 下 面 首先 介绍 如 何 创建 表格 。 
语法 ; 
<table> 
<tr> 
<td> 单 元 格 内 的 文字 </td> 
<td> 单 元 格 内 的 文字 </td> 


<td> 单 元 格 内 的 文字 </td> 
<td> 单 元 格 内 的 文字 </td> 


</table> 
说 明 : <table> 标 记 和 </table> 标 记分 别 标志 着 一 个 表格 的 开始 和 结束 ; 而 <tt> 和 </tr> 则 分 别 表示 表 
格 中 一 行 的 开始 和 结束 ， 在 表格 中 包含 几 组 <tr>…</tr>， 就 表示 该 表格 为 儿 行 ，<td> 和 </td> 表 示 一 个 
单元 格 的 起 始 和 结束 ， 也 可 以 说 表示 一 行 中 包含 了 几 列 。 
实例 代码 : 


<html> 
<head> 
<title> 添 加 表格 </title> 
</head> 
<body> 
<h3> 下 面 插入 了 一 个 表格 : </h3> 
<table> 
<tr> 
<td> 这 是 表格 中 的 第 一 个 单元 格 </td> 
<td> 第 一 行 中 的 第 二 个 单元 格 </td> 
</tr> 
<tr> 
<td> 这 是 表格 的 第 二 行 </td> 
<td> 第 二 行 中 的 第 二 个 单元 格 </td> 
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</tr> 
</table> 
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直面 插入 了 一 个 表格 : 四 
这 是 末尾 中 的 第 一 个 举 元 虱 第 -有 - 行 中 的 第 二 个 单元 属 
这 二 表格 的 先 二 行 第 二 二 个 单元 属 
到 | 
EE mi 
图 8-1 添加 表格 


8.1.2 ”设置 表格 的 标题 一 一 caption 


表格 中 除了 <td> 和 </td> 可 用 来 设置 表格 的 单元 格外 ， 还 可 以 通过 caption 来 设置 特殊 的 一 种 单元 
祭 题 单元 格 。 表 格 的 标题 一 般 位 于 整个 表格 的 第 一 行 ， 为 表格 标示 一 个 标题 行 ， 如 同 在 表格 上 
方 加 一 个 没有 边框 的 行 ， 通 常用 来 存放 表格 标题 。 

语法 : <caption> 表 格 的 标题 </caption> 

下 面 给 本 章 第 一 个 实例 添加 一 个 标题 。 

实例 代码 : 


<html> 
<head> 
<title> 添 加 表格 标题 </title> 
</head> 
<body> 
<h3> 下 面 插入 了 一 个 表格 : </h3> 
<table> 
<caption> 添 加 表格 的 实例 </caption> 
<tr> 
<td> 这 是 表格 中 的 第 一 个 单元 格 </td> 
<td> 第 一 行 中 的 第 二 个 单元 格 </td> 
</tr> 
<tr> 
<td> 这 是 表格 的 第 二 行 </td> 
<td> 第 二 行 中 的 第 二 个 单元 格 </td> 


运行 这 段 代码 ， 看 到 在 表格 内 容 的 上 方 一 行 添加 了 一 个 标题 “添加 表格 的 实例 ”， 这 一 行 标题 默 
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认 情 况 下 居中 显示 ， 如 图 8-2 所 示 。 
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这 是 表格 中 的 划一 个 这 元 ? 中 的 第 二 个 单元 属 
这 是 严格 的 午 二 行 草 二 行 中 的 竺 二 个 单元 将 


图 8-2 添加 表格 的 标题 


8.1.3 表格 的 表 头 一 一 th 


在 表格 中 还 有 一 种 特殊 的 单元 格 ， 称 为 表 头 。 表 格 的 表 头 一 般 位 于 第 一 行 和 第 一 列 ， 用 来 表明 这 
一 行 的 内 容 类 别 ， 用 <th> 和 </th> 标 记 来 表示 。 表 格 的 表 头 与 <td> 标 记 使 用 方法 相同 ， 但 是 表 头 的 内 容 
是 加 粗 显示 的 。 

语法 : 

<table> 
<tr> 
<th> 表 格 的 表 头 </th> 
<th> 表 格 的 表 头 </th> 


<td> 单 元 格 内 的 文字 </td> 
<td> 单 元 格 内 的 文字 </td> 


</table> 
实例 代码 : 


<html> 
<head> 
<title> 添 加 表格 表 头 </title> 
</head> 
<body> 
<h3> 下 面 公布 了 某 中 学 期 中 考试 的 成 绩 : </h3> 
<table> 
<caption> 期 中 考试 成 绩 表 </caption> 
<tr> 
<th> 姓 名 </th> 
<th> 语 文 </th> 
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<th> 数 学 </th> 
<th> 英 语 </th> 
<th> 物 理 </th> 
<th> 化 学 </th> 
</tr> 
<tr> 
<td> 章 弹 来 </td> 
<td>94</td> 
<td>79</td> 
<td>93</td> 
<td>72</td> 
<td>75</td> 
</tr> 
<tr> 
<td> 冯 童 </td> 
<td>79</td> 
<td>85</td> 
<td>74</td> 
<td>59</td> 
<td>73</td> 
</tr> 
<tr> 
<td> 李 四 国 </td> 
<td>94</td> 
<td>99</td> 
<td>95</td> 
<td>89</td> rn 
<td>83</td> 下 面 公布 了 某 中 学 期 中 考试 的 成 绩 : 
</tr> 期 中 考试 让 清末 


</table> 姓名 请 文 数学 英语 物理 化 学 


间 间 来 3 9 5 72 人 
</body> 注音 79 85 74 59 了 


李 四 国 人 的 站 89 83 
</html> 
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运行 程序 , 看 到 在 表格 中 包含 一 行 加 粗 字体 , 这 就 是 表格 的 表 头 ， i 
如 图 8-3 所 示 。 图 8-3 表格 的 表 头 


8.2 设置 表格 基本 属性 


表格 的 基本 属性 包括 表格 的 大 小 和 对 齐 方 式 ， 下 面 一 一 加 以 说 明 。 


8.2.1 设置 表格 宽度 一 一 width 


默认 情况 下 ， 表 格 的 宽度 是 与 表格 内 的 文字 相关 的 ， 是 根据 内 容 自动 调整 的 。 如 果 想 要 指定 表格 
的 宽度 ， 可 以 为 表格 添加 width 参数 。 
语法 : <table width= 表 格 宽度 > 
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说 明 : 表格 宽度 的 值 可 以 是 具体 的 像素 数 ， 也 可 以 设置 为 浏览 器 的 百分比 数 。 
实例 代码 : 


<html> 
<head> 
<title> 设 置 表格 的 宽度 </title> 
</head> 
<body> 
<!- 设 置 表格 的 宽度 为 浏览 器 的 90%--> 
<table width=90%> 
<caption> 期 中 考试 成 绩 表 </caption> 
<tr> 
<th> 姓 名 </th> 
<th> 语 文 </th> 
<th> 数 学 </th> 
<th> 英 语 </th> 
<th> 物 理 </th> 
<th> 化 学 </th> 
</tr> 
<tr> 
<td> 章 弹 来 </td> 
<td>94</td> 
<td>79</td> 
<td>93</td> 
<td>72</td> 
<td>75</td> 
</tr> 
<tr> 
<td> 冯 童 </td> 
<td>79</td> 
<td>85</td> 
<td>74</td> 
<td>59</td> 
<td>73</td> 
</tr> 
<tr> 
<td> 李 四 国 </td> 
<td>94</td> 
<td>99</td> 
<td>95</td> 
<td>89</td> 
<td>83</td> 
</tr> 
</table> 
</body> 
</html> 


运行 这 段 代码 ， 看 到 表格 的 效果 如 图 8-4 所 示 。 调 整 浏览 器 的 宽度 后 ， 表 格 的 宽度 也 会 随 之 变化 ， 
如 图 8-5 所 示 。 
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图 8-4 运行 代码 后 的 表格 效果 图 8-5 调整 浏览 器 宽度 后 的 表格 效果 


如 果 将 表格 中 的 宽度 值 设置 为 固定 的 像素 数 ， 那 么 当 浏览 器 大 小 变化 时 ， 表 格 不 会 随 之 变化 。 
8.2.2 设置 表格 高 度 一 一 height 


设置 表格 高 度 的 方法 与 设置 表格 宽度 的 方法 相同 ， 也 可 以 将 表格 的 高 度 设 置 为 浏览 器 高 度 的 百 分 
比 或 者 是 固定 的 像素 数 。 

语法 :<table height= 表 格 高 度 > 

实例 代码 : 


<html> 
<head> 
<title> 设 置 表格 的 高 度 </title> 
</head> 
<body> 
<!- 设 置 表格 的 宽度 为 浏览 器 的 90%， 高 度 为 200 像素 --> 
<table width=90% height=200> 
<caption> 期 中 考试 成 绩 表 </caption> 
<tr> 
<th> 姓 名 </th> 
<th> 语 文 </th> 
<th> 数 学 </th> 
<th> 英 语 </th> 
<th> 物 理 </th> 
<th> 化 学 </th> 
</tr> 
<tr> 
<td> 章 弹 来 </td> 
<td>94</td> 
<td>79</td> 
<td>93</td> 
<td>72</td> 
<td>75</td> 


<tr> 
<td> 冯 童 </td> 
<td>79</td> 
<td>85</td> 
<td>74</td> 
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<td>59</td> 
<td>73</td> 
</tr> 
<tr> 
<td> 李 四 国 </td> 
<td>94</td> 
<td>99</td> 
<td>95</td> 
<td>89</td> 
<td>83</td> 
</tr> 
bie 姓名 hp 物理 化 学 
</body> 
</html> 
运行 这 段 代码 ， 可 以 看 到 由 于 将 表格 高 度 设 为 了 固定 的 像素 数 ， 无 
论 浏览 器 如 何 变化 ， 表 格 的 高 度 都 保持 不 变 ， 如 图 8-6 所 示 。 图 8-6 设置 表格 的 高 度 


8.2.3 ”表格 对 齐 方式 一 一 align 


表格 的 对 齐 方式 用 于 设置 整个 表格 在 网 页 中 的 位 置 。 
语法 : <table align=" 表 格 对 齐 方式 "> 

说 明 : align 参数 可 以 取 值 为 left、center 或 者 right。 
实例 代码 : 


<html> 
<head> 
<title> 设 置 表 格 对 齐 方 式 </title> 
</head> 
<body> 
<table align="center" width=600> 
<caption> 通 讯 录 </caption> 
<tr> 
<th> 姓 名 </th> 
<th> 地 址 </th> 
<th> 电 话 </th> 
<th> 电 子 邮 件 </th> 
</tr> 
<tr> 
<td> 丁 子 恒 </td> 
<td> 北 京 市 海淀 区 东 王 庄 183 号 </td> 
<td>010-83546675</td> 
<td>ddzz@yahoo.com.cn</td> 
</tr> 
<tr> 
<td> 冯 岗 </td> 
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<td> 北 京 市 景山 公园 3 号 楼 1106 室 </td> 
<td>010-63546874</td> 
<td>fengg165@jingshan.net</td> 

</tr> 

<tr> 
<td> 王 奇 安 </td> 
<td> 南 京 市 雨 花 路 875 号 </td> 
<td>0352-87457454</td> 


<td>wqa@163.com</td> 
</tr> re 
</table> 
</body> 
</html> 
运行 这 段 代 码 ， 可 以 看 到 表格 的 内 容 居 中 显示 ， 如 图 8-7 ”至 
所 示 。 图 8-7 设置 表格 的 对 齐 方式 


8.3 表格 的 边框 


表格 除了 设置 基本 属性 外 ， 还 可 以 设置 边框 效果 ， 包 括 颜色 、 宽 度 等 。 
8.3.1 设置 表格 的 边框 宽度 一 一 border 


默认 情况 下 ， 表 格 是 不 显示 边框 的 。 为 了 使 表格 更 加 清晰 ， 可 以 使 用 border 参数 设置 边框 的 宽度 。 

语法 : <table border= 边 框 宽度 > 

说 明 : 只 有 设 定 了 border 参数 ， 且 其 值 不 为 0， 在 网 页 中 才能 显示 出 表格 的 边框 。border 的 单位 为 
像素 。 

实例 代码 : 


<html> 
<head> 
<title> 设 置 表格 边框 </title> 
</head> 
<body> 
<table width=600 border=1> 
<caption> 通 讯 录 </caption> 
<tr> 
<th> 姓 名 </th> 
<th> 地 址 </th> 
<th> 电 话 </th> 
<th> 电 子 邮 件 </th> 
</tr> 
<tr> 
<td> 丁 子 恒 </td> 
<td> 北 京 市 海淀 区 东 王 庄 183 号 </td> 
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<td>010-83546675</td> 
<td>ddzz@yahoo.com.cn</td> 
</tr> 
<tr> 
<td> 冯 岗 </td> 
<td> 北 京 市 景山 公园 3 号 楼 1106 室 </td> 
<td>010-63546874</td> 
<td>fengg165@jingshan.net</td> 
</tr> 
<tr> 
<td> 王 奇 安 </td> 
<td> 南 京 市 雨 花 路 875 号 </td> 
<td>0352-87457454</td> 
<td>wqa@163.com</td> 
</tr> 
</table> 
</body> 
</html> 


运行 程序 ， 表 格 的 边框 宽度 为 1 像素 ， 效 果 如 图 8-8 所 示 。 由 于 第 一 行 “通讯 录 ” 为 表格 的 
标题 ， 因 此 其 周围 并 没有 边框 。 
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图 8-8 ”设置 表格 的 边框 


[| 


8.3.2 ”表格 边框 颜色 一 一 bordercolor 


默认 情况 下 ， 边 框 的 颜色 是 灰色 的 ， 为 了 让 表格 更 鲜明 ， 可 以 使 用 bordercolor 参数 设置 不 同 的 表 
格 边 框 颜色 。 但 是 设置 边框 颜色 的 前 提 是 边框 宽度 不 能 为 0， 否则 无 法 显示 出 应 有 的 效果 。 

语法 : <table border= 边 框 宽度 bordercolor= "边框 颜色 " > 

说 明 : 在 该 语法 中 ， 边 框 宽度 不 能 为 0， 边框 颜色 为 16 位 颜色 代码 。 

实例 代码 : 


<html> 
<head> 
<title> 设 置 边框 颜色 </title> 
</head> 
<body> 
<table width=600 border=3 bordercolor="#9933CC"> 
<caption>A 厂 某 月 工资 表 </caption> 
<tr> 
<th> 姓 名 </th> 
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<th> 基 本 工资 </th> 
<th> 岗 位 工资 </th> 
<th> 本 月 奖金 </th> 

</tr> 

<tr> 
<td> 崔 维 军 </td> 
<td>1000</td> 
<td>1500</td> 
<td>1300</td> 

</tr> 

<tr> 
<td> 范 勇 </td> 
<td>800</td> 
<td>1000</td> 
<td>850</td> 

</tr> 

<tr> 
<td> 王 奇 安 </td> 
<td>800</td> 
<td>1200</td> 
<td>1150</td> 

</tr> 

</table> 
</body> 
</html> 


运行 这 段 代码 ， 看 到 表格 的 边框 颜色 发 生 了 变化 ， 如 图 8-9 所 示 。 
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图 8-9 设置 表格 边框 颜色 


8.3.3 ”内 框 宽度 一 一 cellspacing 


表格 的 内 框 宽度 是 指 表 格 内 部 各 个 单元 格 之 间 的 宽度 。 
语法 : <table cellspacing= 内 框 宽度 > 

说 明 : 内 框 宽度 的 单位 为 像素 。 

实例 代码 : 

<html> 


<head> 


<title> 设 置 表格 内 框 宽度 </title> 
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</head> 
<body> 
<table width=660 border=1 bordercolor="#990000" cellspacing=10> 
<caption> 通 讯 录 </caption> 
<tr> 
<th> 姓 名 </th> 
<th> 地 址 </th> 
<th> 电 话 </th> 
<th> 电 子 邮 件 </th> 
</tr> 
<tr> 
<td> 丁 子 恒 </td> 
<td> 北 京 市 海淀 区 东 王 庄 183 号 </td> 
<td>010-83546675</td> 
<td>ddzz@yahoo.com.cn</td> 
</tr> 
<tr> 
<td> 冯 岗 </td> 
<td> 北 京 市 景山 公园 3 号 楼 1106 室 </td> 
<td>010-63546874</td> 
<td>fengg165@jingshan.net</td> 
</tr> 
<tr> 
<td> 王 奇 安 </td> 
<td> 南 京 市 雨 花 路 875 号 </td> 
<td>0352-87457454</td> 
<td>wqa@163.com</td> 
</tr> 
</table> 
</body> 


</html> 


运行 这 段 代码 ， 可 以 看 到 表格 中 单元 格 之 间 的 距离 拉 大 了 ， 如 图 8-10 所 示 。 
如 果 将 表格 的 内 框 宽度 更 改 为 0， 效果 如 图 8-11 所 示 。 
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图 8-10 设置 内 框 宽度 图 8-11 调整 表格 的 内 框 宽度 
8.3.4 表格 内 文字 与 边框 距离 一 一 cellpadding 


在 默认 情况 下 ， 表 格 内 的 文字 会 紧 贴 着 表格 的 边框 ， 这 样 看 上 去 非常 拥挤 。 可 以 使 用 cellpadding 
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参数 来 调整 这 一 距离 。 

语法 : <table cellpadding= 文 字 与 边框 的 距离 值 > 

说 明 : 文字 与 边框 的 距离 以 像素 为 单位 ， 一 般 可 以 根据 需要 设置 ， 但 要 注意 不 能 过 大 。 因 为 这 个 
值 不 只 对 左右 距离 有 效 ， 同 时 也 设置 了 上 下 边框 与 文字 的 间隔 。 

实例 代码 : 


<html> 
<head> 
<title> 设 置 文字 与 边框 的 距离 </title> 
</head> 
<body> 
<table border=1 bordercolor="#990000" cellspacing=3 cellpadding=10> 
<caption> 通 讯 录 </caption> 
<tr> 
<th> 姓 名 </th> 
<th> 地 址 </th> 
<th> 电 子 邮 件 </th> 
</tr> 
<tr> 
<td> 丁 子 恒 </td> 
<td> 北 京 市 海淀 区 东 王 庄 183 号 </td> 
<td>ddzz@yahoo.com.cn</td> 
</tr> 
<tr> 
<td> 冯 岗 </td> 
<td> 北 京 市 景山 公园 3 号 楼 1106 室 </td> 
<td>fengg165@jingshan.net</td> 
</tr> 
<tr> 
<td> 王 奇 安 </td> 
<td> 南 京 市 雨 花 路 875 号 </td> 
<td>wqa@163.com</td> 
</tr> 
</table> 


图 8-12 设置 文字 与 边框 的 距离 
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8.4 设 定 表格 背景 
为 了 突出 显示 表格 ， 还 可 以 为 表格 设置 与 页 面 不 同 的 背景 。 
8.4.1 ”设置 表格 背景 色 一 一 bgcolor 


设置 表格 背景 ， 最 简单 的 就 是 给 表格 设置 背景 颜色 。 
语法 : <table bgcolor=" 颜 色 代 码 "> 


实例 代码 : 
<html> 
<head> 
<title> 设 置 表格 背景 </title> 
</head> 
<body> 
<table bgcolor="#DDCCFF" border=1 bordercolor="#990000" cellspacing=3 cellpadding=10> 
<caption> 通 讯 录 </caption> 
<tr> 
<th> 姓 名 </th> 
<th> 地 址 </th> 
<th> 电 子 邮件 </th> 
<th> 电 话 </th> 
</tr> 
<tr> 
<td> 方 代 合 </td> 
<td> 湖 南 省 衡阳 市 衡阳 路 666 号 </td> 
<td>fdhe@yahoo.com.cn</td> 
<td>13100548547</td> 
</tr> 
<tr> 
<td> 冯 岗 </td> 
<td> 义 乌 市 综合 市 场 路 8559 号 </td> 
<td>fengg165@jingshan.net</td> 
<td>13620548578</td> 
</tr> 
<tr> 
<td> 赵 提 安 </td> 
<td> 北 京 市 海淀 区 苏州 街 1122 号 </td> 
<td>zhta@163.com</td> 
<td>13045700506</td> 
</tr> 
</table> 
</body> 


</html> 
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行 这 段 代 码 ， 可 以 看 到 给 表格 设置 了 淡 紫 色 的 背景 ， 如 图 8-13 所 示 。 
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图 8-13 设置 表格 背景 


8.4.2 ”设置 表格 的 背景 图 像 一 一 background 


除了 可 以 为 表格 设置 背景 色 之 外 ， 还 可 以 设置 一 个 背景 图 像 ， 让 表格 更 加 绚丽 。 
语法 : <table background=" 背 景 图 片 的 地 址 "> 

说 明 : 背景 图 片 的 地 址 可 以 设置 为 相对 地 址 ， 也 可 以 设置 为 绝对 地 址 。 

实例 代码 : 


<html> 
<head> 
<title> 设 置 表格 背景 </title> 
</head> 
<body> 
<table background="pic01.jpg" border=1 bordercolor="#660000" cellpadding=5> 
<caption> 通 讯 录 </caption> 
<tr> 
<th> 姓 名 </th> 
<th> 地 址 </th> 
<th> 电 子 邮件 </th> 
</tr> 
<tr> 
<td> 方 代 合 </td> 
<td> 湖 南 省 衡阳 市 衡阳 路 666 号 </td> 
<td>fdhe@yahoo.com</td> 
</tr> 
<tr> 
<td> 冯 岗 </td> 
<td> 义 乌 市 综合 市 场 路 8559 号 </td> 
<td>fengg@ijingshan.net</td> 
</tr> 
<tr> 
<td> 赵 提 安 </td> 
<td> 北 京 市 海淀 区 苏州 街 1122 号 </td> 
<td>zhta@163.com</td> 
</tr> 
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</table> 
</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 表格 的 背景 图 像 如 图 8-14 所 示 。 


图 8-14 设置 表格 的 背景 图 像 
8.5 修改 表格 的 行 属 性 


设 定 了 表格 的 整体 属性 后 ， 还 可 以 对 单独 的 一 行 表格 进行 属性 设置 。 
8.5.1 高度 的 控制 一 一 height 


在 网 页 中 常常 过 到 一 些 表格 中 某 一 行 高 度 和 其 他 行 不 同 的 情况 ， 这 时 就 需要 使 用 height 参数 。 
语法 : <tr height= 表 格 中 某 行 高 度 > 

说 明 : 这 一 参数 只 对 设置 的 这 一 行 有 效 。 

实例 代码 : 


<html> 
<head> 
<title> 设 置 行 高 度 </title> 
</head> 
<body> 
<table border=1 bordercolor="#660000" cellpadding=5> 
<caption> 我 国 著名 词 人 一 一 李清照 </caption> 
<tr height=90> 
<td> 朝 代 </td> 
<td> 宋 代 </td> 
</tr> 
<tr> 
<td> 著 作 </td> 
<td> 如 梦 令 、 永 遇 乐 、 点 绛 唇 、 蝶 恋 花 、 浣 溪 沙 等 </td> 
</tr> 
<tr height=160> 
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<td> 简 介 </td> 

<td> 李清照 (1084-1155?) 号 易 安居 士 ， 齐 州 章 丘 〈 今 属 山东 济南 ) 人 ， 以 词 著称 ， 有 较 高 的 艺术 
造 讶 。<br> 

父 李 格 非 为 当时 著名 学 者 ， 夫 赵 明 诚 为 金石 考据 家 。 早 期 生活 优 裕 ， 与 明 诚 共同 致力 于 书画 金石 
的 搜集 整理 。 金 兵 入 据 中 原 ， 流 寓 南 方 ， 明 诚 病死 ， 境 遇 孤 苦 。 所 作词 ， 前 期 多 写 其 悠闲 生活 ， 后 期 多 悲叹 身世 ， 
情调 感伤 ， 有 的 也 流露 出 对 中 原 的 怀念 。 形 式 上 羡 用 白描 手法 ， 自 辟 途 径 ， 语 言 清丽 。 论 词 强调 协 律 ， 崇 尚 典雅 、 
情 致 ， 提 出 词 “ 别 是 一 家 ”之 说 ， 反 对 以 作 诗 文 之 法 作词 。</td> 

</tr> 
</table> 

</body> 
</html> 


运行 程序 ， 效 果 如 图 8-15 所 示 。 在 图 中 ， 第 1 行 设置 了 90 像素 的 高 度 ; 第 2 行 没有 设置 高 度 值 ， 
是 表格 的 默认 高 度 ; 第 3 行 设置 了 160 像素 的 高 度 。 
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图 8-15 设置 行 高 度 
8.5.2 ”边框 颜色 一 一 bordercolor 


与 表格 相同 ， 对 表格 的 行 来 说 ， 也 可 以 单独 设置 其 外 框 颜色 。 
语法 : <tr bordercolor=" 颜 色 代 码 "> 
实例 代码 : 


<html> 
<head> 
<title> 设 置 行 的 边框 颜色 </title> 
</head> 
<body> 
<table width=500 border=1 bordercolor="00CCFF"> 
<caption>A 厂 某 月 工资 表 </caption> 
<tr> 
<th> 姓 名 </th> 
<th> 基 本 工资 </th> 
<th> 岗 位 工资 </th> 
<th> 本 月 奖金 </th> 
</tr> 
<tr bordercolor="#990000"> 
<td> 崔 维 军 </td> 
<td>1000</td> 
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<td>1500</td> 
<td>1300</td> 
</tr> 
<tr> 
<td> 范 勇 </td> 
<td>800</td> 
<td>1000</td> 
<td>850</td> 
</tr> 
<tr> 
<td> 王 奇 安 </td> 
<td>800</td> 
<td>1200</td> 
<td>1150</td> 
</tr> 
</table> 
</body> 
</html> 


运行 代码 ， 效 果 如 图 8-16 所 示 。 其 中 第 2 行 的 表格 边框 颜色 是 单独 设置 的 ， 与 整个 表格 不 同 。 这 
种 方法 常常 用 来 突出 显示 表格 中 的 某 一 行 。 
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图 8-16 设置 行 的 边框 颜色 
8.5.3” 行 背景 一 一 bgcolor、background 


与 设置 行 的 边框 颜色 相同 ， 行 的 背景 色 也 可 以 单独 设置 。 
语法 : <tr bgcolor=" 颜 色 代码 "> 


实例 代码 : 
<html> 
<head> 
<title> 设 置 行 的 背景 颜色 </title> 
</head> 
<body> 

<table width=500 border=1> 

<caption>A 厂 某 月 工资 表 </caption> 


<tr bgcolor="#FFEEO00"> 
<th> 姓 名 </th> 
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<th> 基 本 工资 </th> 
<th> 岗 位 工资 </th> 
<th> 本 月 奖金 </th> 

</tr> 

<tr> 
<td> 崔 维 军 </td> 
<td>1000</td> 
<td>1500</td> 
<td>1300</td> 

</tr> 

<tr> 
<td> 范 勇 </td> 
<td>800</td> 
<td>1000</td> 
<td>850</td> 

</tr> 

<tr> 
<td> 王 奇 安 </td> 
<td>800</td> 
<td>1200</td> 
<td>1150</td> 

</tr> 

</table> 
</body> 
</html> 


运行 代码 ， 表 格 的 第 一 行 设置 了 单独 的 背景 色 ， 如 
图 8-17 所 示 。 


8.5.4 行文 字 的 水 平 对 齐 方式 一 一 align 


表格 中 也 可 以 为 单独 的 一 行 设置 特殊 对 齐 方式 。 
语法 : <tralign=" 水 平 对 齐 方式 "> 
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图 8-17 设置 行 的 背景 色 


说 明 : 这 里 水 平 对 齐 方式 包含 3 种 ， 分 别 为 left、center 和 right。 


实例 代码 : 


<html> 
<head> 
<title> 设 置 行 的 水 平 对 齐 方 式 </title> 
</head> 
<body> 
<table border=1 bordercolor="#660000" cellpadding=5> 
<caption> 我 国 著名 词 人 一 一 李清照 </caption> 
<tr align="center"> 
<td> 朝 代 </td> 
<td> 宋 代 </td> 
</tr> 
<tr align="right"> 
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<td> 著 作 </td> 
<td> 如 梦 令 、 永 遇 乐 、 点 绛 唇 、 蝶 恋 花 、 浣 溪 沙 等 </td> 
</tr> 
<tr align="left" height=90> 
<td> 简 介 </td> 
<td> 李清照 (1084-1155?) 号 易 安 居士 ， 齐 州 章 丘 〈 今 属 山东 济南 ) 人 ， 以 词 著称 ， 有 较 高 的 艺术 
造 讶 。</td> 
</tr> 
</table> 
</body> 
</html> 


运行 代码 ， 效 果 如 图 8-18 所 示 。 其 中 第 1 行为 水 平 居 中 ; 第 2 行为 右 对 齐 ; 第 3 行为 左 对 齐 。 
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图 8-18 设置 行 的 水 平 对 齐 方式 
8.5.5 ”行文 字 的 垂直 对 齐 方式 一 一 valign 


表格 中 也 可 以 为 单独 的 一 行 设置 特殊 对 齐 方式 。 
语法 : <tr valign=" 乖 直 对 齐 方式 "> 
说 明 : 这 里 ， 垂 直 对 齐 方式 可 以 取 的 值 包含 3 种 ， 分 别 为 ttp、middle 和 bottom。 
实例 代码 : 
<html> 
<head> 
<title> 设 置 行 的 垂直 对 齐 方式 </title> 
</head> 
<body> 
<table border=1 bordercolor="#660000" cellpadding=5> 


<tr height=50 valign="top"> 
<td> 朝 代 </td> 
<td> 宋 代 </td> 
</tr> 
<tr height=50 valign="center"> 
<td> 著 作 </td> 
<td> 如 梦 令 、 永 遇 乐 、 点 绛 唇 、 蝶 恋 花 、 浣 溪 沙 等 </td> 
</tr> 
<tr height=90 valign="bottom"> 
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<td> 简 介 </td> 
<td> 李清照 (1084-1155?) 号 易 安 居士 ， 齐 州 章 丘 〈 今 属 山东 济南 ) 人 ， 以 词 著称 ， 有 较 高 的 艺术 
造 讶 。</td> 
</tr> 
</table> 


对 齐 。 
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图 8-19 设置 行文 字 的 垂直 对 齐 效果 


8.5.6 设置 表格 标题 的 垂直 对 齐 方式 


valign 


表格 标题 是 一 种 特殊 的 行 ， 这 种 行 没有 边框 ， 但 是 依然 可 以 设置 对 齐 方式 ， 包 括 设置 水 平 对 齐 方 
式 和 垂直 对 齐 方式 。 
由 于 表格 标题 也 是 行 的 一 种 ， 其 水 平 对 齐 方式 的 设置 与 其 他 行 相同 ， 通 过 align 参数 来 设置 ， 这 里 
不 再 重复 说 明 。 此 处 讲解 以 下 标题 的 垂直 对 齐 方式 ， 虽 然 同样 使 用 valign 参数 来 设置 ， 但 与 其 他 行 不 
同 的 是 ， 标 题 的 垂直 对 齐 是 指标 题 位 于 表格 的 上 方 或 下 方 。 
语法 : <caption valign=" 垂 直 对 齐 方式 > 表格 的 标题 </caption> 
说 明 : 这 里 垂直 对 齐 方式 的 值 可 以 是 top 或 者 bottom。 取 值 为 ttp， 是 将 标题 文字 设置 在 表格 的 上 
方 ; 取 值 为 bottom， 是 将 标题 文字 设置 在 表格 的 下 方 。 
实例 代码 : 
<head> 
<title> 设 置 表格 标题 的 垂直 对 齐 方式 </title> 
</head> 
<body> 
<table border=1 bordercolor="#660000" cellspacing=0 cellpadding=5> 
<caption valign="bottom"> 某 电脑 公司 销售 清单 </caption> 
<tr> 
<td> 销 售 对 象 </td> 
<td> 类 别 </td> 
<td> 产 品 型 号 </td> 
<td> 数 量 </td> 
<td> 单 价 </td> 
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<tr> 
<td> 单 位 </td> 
<td> 台 式 电脑 </td> 
<td>G280</td> 
<td>5</td> 
<td>6788</td> 

</tr> 

<tr> 
<td> 个 人 </td> 
<td> 电 脑 配件 </td> 
<td>GT2805</td> 
<td>1</td> 
<td>530</td> 

</tr> 

<tr> 
<td> 个 人 </td> 
<td> 笔 记 本 电脑 </td> 
<td>TN3765</td> 
<td>1</td> 
<td>18999</td> 

</tr> 

</table> 
</body> 
</html> 


运行 代码 ， 效 果 如 图 8-20 所 示 。 


图 8-20 ”设置 表格 标题 的 垂直 对 齐 方式 


8.6 调整 单元 格 属性 


表格 中 另外 一 种 元 素 就 是 单元 格 ， 单 元 格 的 属性 标记 和 行 标记 非常 相似 。 


8.6.1 单元 格 大 小 width 、height 

默认 情况 下 ， 单 元 格 的 大 小 会 根据 内 容 自 动 调整 ， 也 可 以 进行 手动 调整 。 

语法 : <td width= 单 元 格 宽度 height= 单 元 格 高 度 > 

说 明 : 单元 格 高 度 和 宽度 的 单位 是 像素 ， 而 对 一 个 单元 格 的 设置 往往 会 影响 多 个 单元 格 。 例 如 设 
置 了 第 1 行 的 第 1 个 单元 格 的 宽度 ， 其 他 行 的 第 1 个 单元 格 宽度 往往 也 会 随 之 变化 。 

实例 代码 : 

<head> 

<title> 设 置 单元 格 大 小 </title> 

</head> 

<body> 

<table border=1 bordercolor="#660000" cellspacing=0 cellpadding=5> 
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<caption> 某 电脑 公司 销售 清单 </caption> 
<tr bgcolor="#DDCCFF"> 
<td width=90 height=20> 销 售 对 象 </td> 
<td width=110> 类 别 </td> 
<td> 产 品 型 号 </td> 
<td> 数 量 </td> 
<td> 单 价 </td> 
</tr> 
<tr> 
<td height=40> 单 位 </td> 
<td> 台 式 电脑 </td> 
<td width=130>G280</td> 
<td width=70>5</td> 
<td>6788</td> 
</tr> 
<tr> 
<td> 个 人 </td> 
<td> 电 脑 配 件 </td> 
<td>GT2805</td> 
<td>1</td> 
<td height=70 width=120>530</td> 
</tr> 
<tr> 
<td> 个 人 </td> 
<td height=35> 笔 记 本 电脑 </td> 
<td>TN3765</td> [em 
<td>1</d> [ET | 
<td>18999</td> ee Em mn s pm 
</tr> 人 em | ， |。 
</table> ry Er 
</body> 
</html> EE EE 


运行 代码 ， 效 果 如 图 8-21 所 示 。 图 8-21 设置 单元 格 大 小 


8.6.2 ”水 平 跨 度 一 一 colspan 


单元 格 水 平 跨 度 是 指 在 复杂 的 表格 结构 中 ， 有 些 单元 格 是 跨 多 个 列 的 。 
语法 : <td colspan= 跨 的 列 数 > 
说 明 : 在 这 里 ， 跨 的 列 数 就 是 这 个 单元 格 所 跨 列 的 个 数 ， 也 可 以 说 是 单元 格 向 右 打 通 的 单元 格 个 数 。 
实例 代码 : 
<head> 
<title> 设 置 单元 格 列 跨 度 </title> 
</head> 
<body> 
<table border=1 bordercolor="#660000" cellspacing=0 cellpadding=5> 
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<caption> 某 电脑 公司 销售 清单 </caption> 
<tr bgcolor="#CCAAFF"> 
<td width=80></td> 
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<td colspan=3 width=400 align="center"> 第 一 季度 </td> 


</tr> 


<tr bgcolor="#DDCCFF"> 


<td> 产 品 型 号 </td> 
<td>1 月 份 </td> 
<td>2 月 份 </td> 
<td>3 月 份 </td> 
</tr> 
<tr> 
<td>G280</td> 
<td>1500</td> 
<td>1800</td> 
<td>2350</td> 
</tr> 
<tr> 
<td>GT2805</td> 
<td>985</td> 
<td>908</td> 
<td>1200</td> 
</tr> 
<tr> 
<td>TN3765</td> 
<td>700</td> 
<td>750</td> 
<td>600</td> 
</tr> 


</table> 
</body> 
</html> 


运行 代码 ， 效 果 如 图 8-22 所 示 ， 其 中 第 1 行 的 第 2 个 


单元 格 跨 了 3 列 。 


8.6.3 垂直 跨 


Ed| 


EL IE LE 
Mk fe] 0 occhoo reort arr siccoc on en me en 刘 


习 
其 击 隔 公司 抽 生 条 时 


第 一 3 
1 所 的 2 从 3 肖 入 
1500 00 ED 
四 
四 


度 一 一 rowspan 


图 8-22 设置 单元 格 列 跨 度 


单元 格 除了 可 以 在 水 平方 向 上 跨 列 ， 还 可 在 垂直 方向 上 跨行 。 跨 行 设置 需要 使 用 rowspan 参数 。 


语法 : <td rowspan= 单 元 格 跨行 数 > 


说 明 : 与 水 平 跨度 相对 应 ，rowspan 设置 的 是 单元 格 在 垂直 方向 上 跨行 的 个 数 ， 也 可 以 说 是 单元 格 
向 下 打通 的 单元 格 个 数 。 
实例 代码 : 


<head> 


<title> 设 置 单 元 格 行 跨度 </title> 


</head> 
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<body> 
<table border=1 bordercolor="#660000" cellspacing=0 cellpadding=5> 
<caption> 某 网 上 书店 销售 分 类 </caption> 
<tr bgcolor="#DDDDFF"> 
<td width=130> 类 别 </td> 
<td width=290> 子 类 别 </td> 


</tr> 
<tr> 
<td rowspan=3> 电 脑 书 籍 </td> 
<td> 编 程 类 </td> 
</tr> 
<tr> 
<td> 图 形 图 像 类 </td> 
</tr> 
<tr> 
<td> 数 据 库 类 </td> 
</tr> 
<tr> 
<td rowspan=2> 考 试 专区 </td> 
<td> 中 考 高 考 </td> 
</tr> 
<tr> 一 
<td> 考 研 类 </td> ED | 
</tr> um 
</table> ee 
</body> li i 
</html> [DE man 引 
运行 代码 ， 效 果 如 图 8-23 所 示 。 图 8-23 设置 单元 格 的 行 跨度 
8.6.4 ”对 齐 方式 一 一 align、valign 
单元 格 的 对 齐 方式 设置 与 行 的 对 齐 方 式 设置 方法 相似 。 
语法 : <td align=" 水 平 对 齐 方式 " valign=" 垂 直 对 齐 方式 "> 
说 明 : 在 该 语法 中 ， 水 平 对 齐 方式 的 取 值 可 以 是 left、center 或 right; 垂直 对 齐 方 式 的 取 值 可 以 是 


top、middle 或 bottom 。 
实例 代码 : 


<head> 
<title> 设 置 单 元 格 的 文字 对 齐 方式 </title> 
</head> 
<body> 
<table border=1 bordercolor="#660000" cellspacing=0 cellpadding=5 height=200 width=550> 
<caption> 某 电脑 公司 销售 清单 </caption> 
<tr bgcolor="#DDCCFF" > 
<td> 销 售 对 象 </td> 
<td > 类 别 </td> 
<td> 产 品 型 号 </td> 
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<td> 数 量 </td> 
<td> 单 价 </td> 

</tr> 

<tr> 
<td> 单 位 </td> 
<td> 台 式 电脑 </td> 
<td>G280</td> 
<td>5</td> 
<td>6788</td> 

</tr> 

<tr> 
<td> 个 人 </td> 
<td> 电 脑 配件 </td> 
<td>GT2805</td> 
<td>1</td> 
<td>530</td> 

</tr> 

<tr> 
<td> 个 人 </td> 
<td> 笔 记 本 电脑 </td> 
<td>TN3765</td> 
<td>1</td> 
<td>18999</td> 

</tr> 

</table> 
</body> 
</html> 


运行 程序 , 效果 如 图 8-24 所 示 。 图 中 对 不 同 单元 格 的 对 齐 方 
式 进行 了 不 同 的 设置 ， 效 果 也 不 相同 。 


8.6.5 设置 单元 格 的 背景 色 


J 


图 8-24 设置 单元 格 对 齐 方式 


为 了 增加 表格 的 绚丽 ， 可 以 为 不 同 的 单元 格 分 别 设置 不 同 的 背景 颜色 。 


语法 : <td bgcolor=" 颜 色 代码 "> 
实例 代码 : 

<head> 

<title> 设 置 单元 格 的 背景 色 </title> 
</head> 

<body> 


<table border=1 bordercolor="#660000" cellspacing=0 cellpadding=5 height=200 width=550> 


<caption> 某 电脑 公司 销售 清单 </caption> 
<tr bgcolor="#FFF2C1" > 
<td> 销 售 对 象 </td> 
<td> 类 别 </td> 
<td> 产 品 型 号 </td> 
<td> 数 量 </td> 
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<td> 单 价 </td> 
</tr> 
<tr> 
<td bgcolor="#71E2FF"> 单 位 </td> 
<td bgcolor="#B382EE"> 台 式 电脑 </td> 
<td bgcolor="#7EF1C0">G280</td> 
<td bgcolor="#78DC87">5</td> 
<td bgcolor="#F19B7E">6788</td> 
</tr> 
<tr> 
<td bgcolor="#7EF1CF"> 个 人 </td> 
<td bgcolor="#E49B7E"> 电 脑 配 件 </td> 
<td bgcolor="#EF81C6">GT2805</td> 
<td bgcolor="#B6BOE3">1</td> 
<td bgcolor="#B182FF">530</td> 
</tr> 
</table> 
</body> 
</html> 


运行 这 段 代码 ， 效 果 如 图 8-25 所 示 。 


图 8-25 设置 单元 格 的 背景 色 


8.6.6 单元 格 的 边框 颜色 一 一 bordercolor 


单元 格 的 边框 颜色 可 以 通过 bordercolor 参数 单独 设置 。 
语法 : <td bordercolor=" 颜 色 代 码 "> 
实例 代码 : 


<head> 
<title> 设 置 单 元 格 的 边框 颜色 </title> 
</head> 
<body> 
<table border=2 bordercolor="#CCCCFF" cellspacing=5 cellpadding=5 height=140 width=550> 
<caption> 某 电脑 公司 销售 清单 </caption> 
<tr bgcolor="#EEFECC"> 
<td> 销 售 对 象 </td> 
<td> 类 别 </td> 


"138。 HTML 网 页 设计 参考 手册 


<td> 产 品 型 号 </td> 
<td> 数 量 </td> 
<td> 单 价 </td> 

</tr> 

<tr> 
<td bordercolor="#77EE00"> 单 位 </td> 
<td bordercolor=#BB8800"> 台 式 电 脑 </td> 
<td bordercolor="#7700CC">G280</td> 
<td bordercolor="#77CC88">5</td> 
<td bordercolor="#00AA77">6788</td> 

</tr> 

<tr> 
<td bordercolor="#8800FF"> 个 人 </td> 
<td bordercolor="#009970"> 电 脑 配 件 </td> 
<td bordercolor="#0088CC">GT2805</td> 
<td bordercolor="#B6BOE3">1</td> 
<td bordercolor="#BB8800">530</td> 

</tr> 

</table> 
</body> 
</html> 


运行 代码 ， 会 发 现 各 个 单元 格 的 边框 设置 了 不 同 的 颜色 ， 如 图 8-26 所 示 。 
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图 8-26 设置 单元 格 边框 颜色 


[EE 


8.6.7 ”设置 单元 格 的 亮 边框 一 一 bordercolorlight 


单元 格 的 亮 边框 就 是 单元 格 边框 向 光 的 部 分 。 通 过 bordercolorlight 参数 可 以 单独 定义 单元 格 亮 边 
框 的 颜色 。 

语法 : <tb bordercolorligh 人 "颜色 代码 "> 

实例 代码 : 

<head> 

<title> 设 置 单 元 格 的 亮 边框 颜色 </title> 

</head> 

<body> 

<table border=2 bordercolor="#DDAAFF" cellspacing=5 height=140 width=550> 

<caption> 某 商店 物价 表 </caption> 
<tr bgcolor="#EEFECC"> 
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<td> 产 品名 称 </td> 
<td> 类 别 </td> 
<td> 生 产 日 期 </td> 
<td> 价 格 </td> 
<td> 产 地 </td> 

</tr> 

<tr> 
<td bordercolorlight="#FF0000"> 苹 果 钠 头 </td> 
<td> 食 品 </td> 
<td bordercolorlight="#0000FF">2005-7-22</td> 
<td>8.70</td> 
<td> 上 海 </td> 

</tr> 

<tr> 
<td> 红 应 钢笔 </td> 
<td> 日 用 品 </td> 
<td bordercolorlight="#00FFEE">2005-2-15</td> 
<td>35.00</td> 
<td> 北 京 </td> 

</tr> 

</table> 
</body> 
</html> 


运行 代码 ， 看 到 表格 中 设置 了 亮 边框 的 效果 ， 如 图 8-27 所 示 。 
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图 8-27 设置 单元 格 的 亮 边 框 


8.6.8 ”设置 单元 格 的 暗 边 框 一 一 bordercolordark 


单元 格 的 瞳 边 框 就 是 单元 格 边 框 背光 的 部 分 。 通 过 bordercolordark 参数 可 以 单独 定义 单元 格 暗 边 
框 的 颜色 。 

语法 : <tb bordercolordark=" 颜 色 代 码 "> 

实例 代码 : 

<head> 

<title> 设 置 单 元 格 的 暗 边框 颜色 </title> 

</head> 

<body> 

<table border=2 bordercolor="#DDAAFF" cellspacing=5 height=140 width=550> 
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<caption> 某 商店 物价 表 </caption> 
<tr bgcolor="#EEFECC"> 
<td> 产 品名 称 </td> 
<td> 类 别 </td> 
<td> 生 产 日 期 </td> 
<td> 价 格 </td> 
<td> 产 地 </td> 
</tr> 
<tr> 
<td bordercolorlight ="#FF0000" bordercolordark ="#000099"> 苹 果 色 头 </td> 
<td> 食 品 </td> 
<td bordercolorlight="#0000FF" bordercolordark ="#000000">2005-7-22</td> 
<td>8.70</td> 
<td> 上 海 </td> 
</tr> 
<tr> 
<td> 红 应 钢笔 </td> 
<td> 日 用 品 </td> 
<td bordercolorlight="#00FFEE" bordercolordark ="#330000">2005-2-15</td> 
<td>35.00</td> 
<td> 北 京 </td> 
</tr> 
</table> 
</body> 
</html> 
运行 代码 ， 可 以 看 到 表格 中 设置 了 上 暗 边 框 的 效果 ， 如 图 8-28 所 示 。 
Er ely| 
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图 8-28 设置 单元 格 的 暗 边 框 


8.6.9 ”设置 单元 格 的 背景 图 像 一 一 background 


与 表格 的 行 设置 不 同 的 是 ， 单 元 格 可 以 设置 背景 为 图 像 格 式 。 
语法 : <td background=" 背 景 图 片 的 地 址 "> 

说 明 : 背景 图 片 的 地 址 可 以 是 绝对 地 址 ， 也 可 以 是 相对 地 址 。 
实例 代码 : 

<head> 

<title> 设 置 单元 格 的 背景 图 片 </title> 

</head> 

<body> 
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<table border=2 bordercolor="#DDAAFF" cellspacing=5 height=140 width=550> 
<caption> 某 公司 职员 表 </caption> 
<tr bgcolor="#FEDF9E"> 
<td> 职 工 代 码 </td> 
<td> 部 门 </td> 
<td> 姓 名 </td> 
<td> 性 别 </td> 
<td> 年 龄 </td> 
<td> 职 工 类 别 </td> 
</tr> 
<tr> 
<td background="pic02.jpg">ZHGS01001</td> 
<td> 总 公司 </td> 
<td bgcolor="#67AEFE"> 崔 维 军 </td> 
<td> 男 </td> 
<td>35</td> 
<td> 行 政 </td> 
</tr> 
<tr> 
<td>ZHGS01002</td> 
<td> 总 公司 </td> 
<td> 官 莉 </td> 
<td> 女 </td> 
<td>33</td> 
<td bgcolor=" #5C1A5"> 行 政 </td> 
</tr> 
<tr> 
<td bgcolor=" #BC9CFE" background="pic02.jpg" >ZHGS02001</td> 
<td> 总 公司 </td> 
<td> 费 文 龙 </td> 
<td> 男 </td> 
<td>41</td> 
<td> 技 术 </td> 
</tr> 
<tr> 
<td>ZHGS02002</td> 
<td> 总 公司 </td> 
<td> 顾 炳 华 </td> 
<td> 男 </td> 
<td>27</td> 
<td> 技 术 </td> 
</tr> te 
</table> 条 六 司职 抽 天 
</body> 
</html> 


运行 代码 ， 效 果 如 图 8-29 所 示 。 当 同时 设置 了 单元 格 背景 


色 和 单元 格 背 景 图 片 时 , 网 页 中 将 会 显示 图 片 的 效果 ,如 第 4 行 - 
第 1 个 单元 格 。 图 8-29 设置 单元 格 的 背景 图 像 
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8.6.10 ”文字 内 容 不 换行 一 一 nowrap 


当 表 格 没有 设 定 宽度 时 ， 整 个 表 的 宽度 会 根据 表格 内 容 进行 调整 ， 但 表格 的 宽度 不 会 超出 浏览 器 


的 宽度 。 当 单元 格 内 的 内 容 过 长 时 会 自动 换行 ， 下 面 以 实例 说 明 。 
实例 代码 : 


<html> 
<head> 
<title> 表 格 内 容 过 长 </title> 
</head> 
<body> 
<table align="center" border=1 cellspacing=0 bordercolor="#990000" cellpadding=3> 
<caption> 通 讯 录 </caption> 
<tr> 
<th> 姓 名 </th> 
<th> 地 址 </th> 
<th> 电 话 </th> 
<th> 电 子 邮 件 </th> 
<th> 其 他 联系 方法 </th> 
</tr> 
<tr> 
<td> 崔 维 </td> 
<td> 天 津 市 河东 区 王子 胡同 183 号 </td> 
<td>022-83546675</td> 
<td>ddzz@yahoo.com.cn</td> 
<td>13057891234</td> 
</tr> 
<tr> 
<td> 冯 炳 华 </td> 
<td> 北 京 市 景山 公园 3 号 楼 5 单元 1106 室 </td> 
<td>010-63546874</td> 
<td>fengg165@jingshan.net</td> 
<td>13656462636</td> 
</tr> 
<tr> 
<td> 王 奇 安 </td> 
<td> 南 京 市 雨 花 路 875 号 </td> 
<td>0352-87457454</td> 
<td>wqa@163.com</td> 
<td>13211118888</td> 


</tr> 


</table> 


</body> 


</html> 


运行 代码 , 可 以 看 到 单元 格 的 内 容 自 动 换行 ,效果 如 图 8-30 


所 示 。 图 8-30 ” 表 头 过 长 时 换行 显示 
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如 果 不 希 望 表格 中 某 个 单元 格 的 内 容 换行 ， 可 以 通过 nowrap 参数 进行 设置 。 
语法 : 
<th nowrap> 
<td nowrap> 
说 明 : 这 一 参数 可 以 设置 在 表格 标题 中 ， 也 可 以 设置 在 普通 单元 格 中 。 
实例 代码 : 


<html> 

<head> 

<title> 表 格 内 容 不 换行 </title> 

</head> 

<body> 

<table align="center" border=1 cellspacing=0 bordercolor="#990000" cellpadding=3> 

<caption> 通 讯 录 </caption> 
<tr> 


<th> 姓 名 </th> 
<th> 地 址 </th> 
<th> 电 话 </th> 
<th> 电 子 邮 件 </th> 
<th nowrap> 其 他 联系 方法 </th> 

</tr> 

<tr> 
<td> 崔 维 </td> 
<td nowrap> 天 津 市 河东 区 王子 胡同 183 号 </td> 
<td>022-83546675</td> 
<td>ddzz@yahoo.com.cn</td> 
<td>13057891234</td> 

</tr> 

<tr> 
<td nowrap > 冯 炳 华 </td> 
<td> 北 京 市 景山 公园 3 号 楼 5 单元 1106 室 </td> 
<td>010-63546874</td> 
<td>fengg165@jingshan.net</td> 
<td>13656462636</td> 

</tr> 

<tr> 
<td nowrap > 王 奇 安 </td> 
<td> 南 京 市 雨 花 路 875 号 </td> 
<td>0352-87457454</td> 
<td>wqa@163.com</td> 
<td>13211118888</td> 

</tr> 

</table> 
</body> 
</html> 


运行 代码 ， 可 以 看 到 表格 中 设置 了 nowrap 参数 的 单元 格 


内 容 不 换行 显示 了 ， 如 图 8-31 所 示 。 而 超出 浏览 器 宽度 的 内 
容 则 通过 浏览 器 的 滚动 条 来 显示 。 人 


ET 
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8.7 表格 的 结构 


除了 对 表格 的 设计 标记 外 ， 还 有 一 些 标记 是 用 来 明确 表格 结构 的 。 通 过 对 结构 的 设置 而 分 别 对 表 
首 、 表 主体 以 及 表 尾 的 样式 进行 设置 。 这 些 都 通过 成 对 出 现 的 标记 设置 ， 应 用 到 表格 里 用 于 整体 规划 
表格 的 行列 属性 。 使 用 这 些 标记 能 对 表格 的 一 行 或 多 行 单元 格 属 性 进行 统一 修改 ， 从 而 省 去 了 逐一 修 
改 单元 格 属性 的 麻烦 。 


8.7.1 ”设计 表 头 样式 一 一 thead 


表 头 样式 的 开始 标记 是 <thead>， 结 束 标记 是 </thead>。 它 们 用 于 定义 表格 最 上 端 表 首 的 样式 ， 其 
中 可 以 设置 背景 颜色 、 文 字 对 齐 方式 、 文 字 的 垂直 对 齐 方式 等 。 
语法 : 
<thead bgcolor=" 颜 色 代 码 " align=" 对 齐 方式 " valign=" 垂 直 对 齐 方式 "> 


</thead> 
说 明 : 在 该 语法 中 ，bgcolor、align、valign 参数 的 取 值 范围 与 单元 格 中 的 设置 方法 相同 ，align 可 
以 取 值 left、center 或 right; valign 可 以 取 值 top、middle 或 bottom。 在 <thead> 标 记 内 还 可 以 包含 <td>、 
<th> 和 <tr> 标 记 ， 而 一 个 表 元 素 中 只 能 有 一 个 <thead> 标 记 。 
实例 代码 : 


<html> 
<head> 
<title> 设 置 表 头 的 样式 </title> 
</head> 
<body> 
<table align="center" border=1 bordercolor="#990000" cellpadding=3 width=550 height=180> 
<caption> 某 单位 物品 领 用 表 </caption> 
<thead bgcolor="#DDDDFF" align="center" valign="bottom"> 
<tr> 
<th> 物 品名 </th> 
<th> 类 型 </th> 
<th> 领 用 人 </th> 
<th> 领 用 人 部 门 </th> 
<th> 数 量 </th> 
</tr> 
</thead> 
<tr> 
<td> 网 站 管理 与 设计 </td> 
<td> 书 籍 </td> 
<td> 王 文 </td> 
<td> 技 术 开 发 部 </td> 
<td>1</td> 
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</tr> 
<tr> 
<td>XX 牌 鼠 标 </td> 
<td> 计 算 机 设备 </td> 
<td> 李 颖 </td> 
<td> 行 政 办 公 室 </td> 
<td>1</td> 
</tr> 
<tr> 
<td> 打 印 纸 </td> 
<td> 办 公 耗 材 </td> 
<td> 田 芯 原 </td> ee | 
<td> 售 后 服务 部 </td> Ss dm gv maa | 
<td>5</td> 位相 用 ; 
</tr> Er 
Rs | | 下 s | 
i St 
[pe PSH。 | 
tm 恒利 | 
运行 这 段 代 码 ， 效 果 如 图 8-32 所 示 。 图 8-32 设计 表 头 样式 


8.7.2 ”设计 表 主 体 样式 tbody 


与 表 头 样式 的 标记 功能 类 似 ， 表 主体 样式 用 来 统一 设计 表 主 体 部 分 的 样式 ， 标 记 为 <tbody>。 
<tbody bgcolor=" 颜 色 代 码 " align=" 对 齐 方式 " valign=" 徘 直 对 齐 方式 "> 


</tbody> 
说 明 : 在 该 语法 中 ，bgcolor、align、valign 参数 的 取 值 范围 与 <thead> 标 记 中 的 相同 。 一 个 表 元 素 
中 只 能 有 一 个 <tbody> 标 记 。 
实例 代码 : 


<html> 
<head> 
<title> 设 置 表 主 体 的 样式 </title> 
</head> 
<body> 
<table align="center" border=1 bordercolor="#990000" cellpadding=3 width=550 height=180> 
<caption> 某 单位 物品 领 用 表 </caption> 
<thead bgcolor="#97B6FF" align="center" valign="bottom"> 
<tr> 
<th> 物 品名 </th> 
<th> 类 型 </th> 
<th> 领 用 人 </th> 
<th> 领 用 人 部 门 </th> 
<th> 数 量 </th> 
</tr> 
</thead> 
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<tbody bgcolor="#FFF0D7" align="left" valign="bottom"> 


<tr> 
<td> 网 站 管理 与 设计 </td> 
<td> 书 籍 </td> 
<td> 王 文 </td> 
<td> 技 术 开 发 部 </td> 
<td>1</td> 

</tr> 

<tr> 
<td>XX 牌 鼠标 </td> 
<td> 计 算 机 设备 </td> 
<td> 李 颖 </td> 
<td> 行 政 办 公 室 </td> 
<td>1</td> 

</tr> 

<tr> 
<td> 打 印 纸 </td> 
<td> 办 公 耗 材 </td> 
<td> 田 藤原 </td> 
<td> 售 后 服务 部 </td> 
<td>5</td> 

</tr> 

</tbody> 
</table> 
</body> 
</html> 


运行 这 段 代码 , 可 以 看 到 表格 的 主体 内 容 统 一 设置 
了 样式 ， 如 图 8-33 所 示 。 


8.7.3 设计 表 尾 样式 一 一 tfoot 


<tfoof> 标 记 用 于 定义 表 尾 样式 。 


EC 


Er TE 


alalad 


Dr CE] 
ET rr 


J oma 


3 


某 单位 物品 领 币 表 
物品 各 类 型 领 用 人 | 领 用 人 部 门 | 我 好 
站 节理 Si& 计 | 书生 [ex 村 Q 术 开发 部 | 
0 昌 愉 标 . | 计算 机 设备 sm 行政 办公 室 | 1 
打印 多 Ee | [ 戎 原 。 | 售后 服务 部 | 5 
[mm 


图 8-33 设置 表格 主体 的 样式 


<tfoot bgcolor=" 颜 色 代 码 "align=" 对 齐 方式 " valign=" 垂 直 对 齐 方式 "> 


</tfoot> 


说 明 : 在 该 语法 中 ，bgcolor、align、valign 参数 的 取 值 范围 与 <thead> 标 记 中 的 相同 。 一 个 表 元 素 


中 只 能 有 一 个 <tfoot> 标 记 。 
实例 代码 : 


<html> 

<head> 

<title> 设 置 表 尾 的 样式 </title> 
</head> 

<body> 
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<table align="center" border=1 bordercolor="#990000" cellpadding=3 width=550 height=160> 
<caption> 某 单位 物品 领 用 表 </caption> 


<thead bgcolor="#97B6FF" align="center valign="bottom"> 


<tr> 
<th> 物 品名 </th> 
<th> 类 型 </th> 
<th> 领 用 人 </th> 
<th> 领 用 人 部 门 </th> 
<th> 数 量 </th> 

</tr> 

</thead> 


<tbody bgcolor="#FFFOD7" align="left" valign="bottom"> 


<tr> 
<td> 网 站 管理 与 设计 </td> 
<td> 书 籍 </td> 
<td> 王 文 </td> 
<td> 技 术 开发 部 </td> 
<td>1</td> 

</tr> 

<tr> 
<td>XX 牌 鼠标 </td> 
<td> 计 算 机 设备 </td> 
<td> 李 颖 </td> 
<td> 行 政 办 公 室 </td> 
<td>1</td> 

</tr> 

<tr> 
<td> 打 印 纸 </td> 
<td> 办 公 耗 材 </td> 
<td> 田 蕨 原 </td> 
<td> 售 后 服务 部 </td> 
<td>5</td> 

</tr> 

</tbody> 


<tfoot bgcolor="#FAA9AB" align="right" valign="middle"> 


<tr> 


<td colspan=5> 表 格 创建 日 期 : XX-XX-XX</td> 


</tr> 
</tfoot> 
</table> 
</body> 
</html> 


运行 这 段 代码 ， 效 果 如 图 8-34 所 示 。 


+ ODI ne doma Fmr 4 
re 


荣昌 位 物 铝 信用 不 


S| 


EE3 = Bg 


图 8-34 ”设计 表 尾 样 式 
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8.8 表格 的 上 误 套 


在 实际 应 用 中 ， 表 格 并 不 是 单一 出 现 的 ， 往 往 需要 在 表格 内 嵌 套 其 他 的 表格 来 实现 页 面 的 整体 布 
局 。 一 般 情 况 下 需要 使 用 一 些 可 视 化 软件 来 实现 布局 ， 这 样 看 起 来 比较 直观 ， 容 易 达到 预期 的 目的 。 
也 可 以 直接 通过 输入 代码 来 实现 。 下 面 举例 说 明 表 格 的 嵌 套 。 

实例 代码 : 


<html> 
<head> 
<title> 表 格 的 赃 套 </title> 
</head> 
<body> 
< 上 -使 用 表格 的 嵌 套 功能 设计 网 页 的 版 式 --> 
<table width="560" height="300" border="1" cellspacing="0" align="center"> 
<thead bgcolor="#8A84FF"> 
<tr height="70"> 
<td width="160"> 网 站 logo</td> 
<td width="400"> 网 站 banner</td> 
</tr> 
</thead> 
<tbody> 
<tr valign="top" height="200"> 
<td width="160" align="center"> 
<table width="135" height="180" border="1" cellspacing="0" bgcolor="#97B6FF"> 
<tr> 
<td> 页 面 导航 </td> 
</tr> 
<tr> 
<td> 页 面 导航 </td> 
</tr> 
<tr> 
<td> 页 面 导航 </td> 
</tr> 
<tr> 
<td> 页 面 导航 </td> 
</tr> 
<tr> 
<td> 页 面 导航 </td> 
</tr> 
</table> 
</td> 
<td width="400" height="200" background="pic03jpg"> 
<table width="380" height="160" border="1" bordercolor="#FF9900" cellspacing="2" cellpadding="5"> 
<tr> 
<td> 网 站 板块 </td> 
<td> 网 站 板块 </td> 
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</tr> 
<tr> 
<td> 网 站 板块 </td> 
<td> 网 站 板块 </td> 
</tr> 
</table> 
</td> 
</tr> 
</tbody> 
<tfoot bgcolor="#0000FF"> 
<tr align="center"> 
<td height="30" colspan="2"><font color="#FFFFFF"> 版 权 信息 </font></td> 


</tr> 

</tfoot> 

</table> 

</body> 

</html> 

运行 这 段 代码 ， 可 以 看 到 设计 的 网 页 版 式 如 图 8-35 所 示 。 
ER | 
lh ae ER EE EPE CET J 


Er 


图 835 表格 的 杠 套 效果 
8.9” 层 标记 一 一 div 


层 标记 也 可 以 称 为 区 隔 标记 ， 可 以 看 作 是 为 网 页 排版 的 标记 。 在 这 一 方面 它 与 表格 有 者 相似 的 功 
能 ， 但 层 能 够 完成 更 加 复杂 、 更 加 灵活 的 排版 效果 。 它 能 够 将 字 、 画 、 表 格 等 多 种 元 素 组 成 一 个 区 域 
进行 样式 的 统一 设置 。 

语法 : <div id= 值 align= 对 齐 方式 style= 样 式 class= 应 用 的 样式 类 ></div> 

说 明 : 在 该 语法 中 ，id 用 来 标识 层 ; align 用 来 设 定 层 内 元 素 的 对 齐 方式 ， 包 括 左 对 齐 、 右 对 齐 和 
居中 对 齐 ; style 则 用 来 设 定 层 的 属性 ， 包 括 层 的 大 小 范围 和 起 始 位 置 ; class 用 于 定义 层 所 应 用 的 CSS 
样式 。 一 般 情 况 下 ，div 标记 常常 和 CSS 样式 表 结 合 使 用 ， 这 在 后 面 讲解 CSS 样式 时 ,会 充分 用 到 div 
标记 将 一 部 分 页 面 元 素 组 合成 一 个 块 级 区 域 。 

实例 代码 : 

<html> 


<head> 
<title> 设 置 层 </title> 
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</head> 
<body> 
<div id="exam1" align="center> 
<h3> 轩 辕 剑 三 外 传 : 天 之 痕 </h3> 
<hr size=2> 
<p> 神 州 大 地 上 ， 从 神话 时 代 流传 下 来 十 种 上 上 古 神 器 一 一 钟 、 剑 、 伏 、 壶 、 塔 、 琴 、 睦 、 印 、 镜 、 石 。 它 
们 各 自 有 着 过 然 不 同 的 绝世 力量 。 只 要 稍 加 利用 即 可 纵横 四 海 ， 无 敌 天 下 。 但 它们 的 下 落 ， 已 潭 灭 于 神州 漫长 之 
乱世 历史 中 。 
<p> 除 了 轩辕 剑 ， 还 有 创 世 神 开天辟地 使 用 的 神器 炼 妖 壶 ， 在 上 古 英 雄 的 手中 驾 转 流传 ， 在 这 些 古 人 的 庇 
佑 下 ， 中 国 到 了 文化 旱 盛 的 时 代 一 一 隋唐 。 
<p> 公 元 七 世纪 ， 南 北朝 时 期 ， 北 朝 皇 帝 隋 文帝 派兵 消灭 了 南朝 陈 国 后 ， 结 束 了 中 原 南北 朝 数 百年 之 分 列 
局 面 ， 重 新 统一 了 中 国 并 成 立 了 隋 国 。 然 而 陈 国 的 遗民 悲痛 祖国 亡 灭 ， 在 江南 集结 大 军 数 万 兴兵 反抗 ， 企 图 一 举 
复 国 。 隋 文帝 下 令 出 兵 平 乱 ， 然 而 最 令 人 惊讶 的 是 ， 这 支 平 乱 部 队 为 首 竟 是 一 位 身 披 神秘 斗篷 ， 年 近 十 二 岁 的 少 
年 。 他 手持 一 把 雕 有 古朴 花纹 的 金色 之 剑 ， 此 妃 十 大 上 上 古 神 器 之 一 一 一 轩辕 剑 。 少 年 在 一 击 之 间 ， 便 将 反抗 朝廷 
的 陈 国 数 万 人 马 化 为 飞 灰 ! 自 此 ， 大 隋 威 名 让 所 有 反抗 者 闻 之 色 变 ， 再 没有 人 敢 轻 起 反抗 之 念 。 
<p> 天 之 痕 的 故事 从 十 六 年 后 开始 ， 发 生 在 轩辕 剑 三 的 一 百 三 十 三 年 前 …… 
</div> 
<div id="exam2" style="position:absolute;top:70pt;left:170pt;"> 
<img src="pic04.jpg" width=220> 
</div> 
<br> 
</body> 
</html> 


运行 程序 , 效果 如 图 8-36 所 示 。 其 中 第 1 个 层 将 文字 元 素 放置 其 中 , 并 设置 对 齐 方式 为 居中 对 齐 ; 
而 第 2 个 层 中 放置 了 一 个 图 片 ， 并 使 用 style 参数 设 定 了 该 层 的 位 置 。style 参数 中 取 值 的 具体 设置 方法 
在 后 面 CSS 样式 表 一 章 〈 第 11 章 ) 中 还 将 具体 介绍 ， 这 里 只 需 知道 设置 了 层 的 位 置 即 可 。 


神州 大 地 上 ， 从 神话 时 代 流 传 下 二 十 | 
不 同 约 操 世 力量 。 失 要 硝 加 利用 了 

钴 流传， 在 这 毕 古 作 雏 奔 告 下 ， 中 医 到 了 

和 娄 他 分 重新 统一 


的 少年 、 他 手 : 
人 己 化 为 习 右 ! 自 


天 之 并 的 吉事 从 十 六 证 后 开 寻 ， 发 生 在 政信 记 三 的 一 可 三 十 三 生前 … 
SEE [ I 


8-36” 层 的 效果 


第 章 
添加 表单 


WI ”表单 标记 form 
了 添加 控件 

六 ”和 给 入 类 的 控件 

WI 菜 间 列表 大 的 控件 


WD 文本 域 标记 


textarea 
Pl id 标记 


表单 的 用 途 很 多 ,在 制作 网 页 ， 将 别 是 制作 动态 网 页 时 常常 会 用 到 。 表 单 主 
要 用 来 收集 客户 端 提供 的 相关 信息 ， 使 网 页 具有 交互 的 功能 。 它 是 HTML 页 面 
与 浏览 器 实现 交互 的 重要 手段 。 在 网 页 的 制作 过 程 中 ， 常常 需要 使 用 表单 ， 例 如 
在 进行 用 户 注 册 时 , 就 必须 通过 表单 填写 用 户 的 相关 信息 。 本 章 将 讲解 各 种 表单 
的 用 法 。 
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表单 通常 设计 在 一 个 HTML 文档 中 ， 当 用 户 填 写 完 信息 后 做 提交 操作 ， 将 表单 的 内 容 从 客户 端的 
浏览 器 传送 到 服务 器 上 ， 经 过 服务 器 处 理 程序 后 ， 再 将 用 户 所 需 信 息 传送 回 客户 端的 浏览 器 上 ， 这 样 
网 页 就 具有 了 交互 性 。 

在 网 页 中 ， 最 常见 的 表单 形式 主要 包括 文本 框 、 单 选 按钮 、 复 选 框 、 按 钮 等 ， 如 图 9-1 所 示 。 在 
网 易 的 主页 中 ， 就 包含 了 文本 框 、 按 钮 、 下 拉 列 表 等 表单 内 容 。 


图 9-1 网 页 中 的 表单 
下 面 就 对 如 何 使 用 HTML 标志 来 设计 表单 进行 详细 的 介绍 。 


9.1 表单 标记 


form 


在 HTML 中 ,<form></form> 标 志 对 用 来 创建 一 个 表单 ， 也 即 定义 表单 的 开始 和 结束 位 置 ， 在 标志 
对 之 间 的 一 切 都 属于 表单 的 内 容 。 

每 个 表单 元 素 开始 于 form 元 素 ， 可 以 包含 所 有 的 表单 控件 ， 还 有 任何 必需 的 伴随 数据 ， 如 控件 的 
标签 、 处 理 数据 的 脚本 或 程序 的 位 置 等 。 在 表单 的 <form> 标 记 中 ， 还 可 以 设置 表单 的 基本 属性 ， 包 括 
表单 的 名 称 、 处 理 程序 、 传 送 方法 等 。 一 般 情况 下 ， 表 单 的 处 理 程 序 action 和 传送 方法 method 是 必 不 
可 少 的 参数 。 


9.1.1 处理 程序 一 一 action 


真正 处 理 表单 的 数据 脚本 或 程序 在 action 属性 里 ， 这 个 值 可 以 是 程序 或 脚本 的 一 个 完整 URL。 
语法 : 
<form action=" 表 单 的 处 理 程 序 "> 


</form> 
说 明 : 在 该 语法 中 ， 表 单 的 处 理 程序 定义 的 是 表单 要 提交 的 地 址 ， 也 就 是 表单 中 收集 到 的 资料 将 
要 传递 的 程序 地 址 。 这 一 地 址 可 以 是 绝对 地 址 ， 也 可 以 是 相对 地 址 ， 还 可 以 是 一 些 其 他 的 地 址 形式 ， 
例如 发 送 E-mail 等 。 
实例 代码 : 
<html> 
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<head> 

<title> 设 定 表单 的 处 理 程序 </title> 

</head> 

<body> 
下 面 是 关于 本 产品 的 调查 内 容 : 
<!-- 这 是 一 个 没有 控件 的 表单 -> 
<form action="mailto:abcd@163.com"> 
</form> 

</body> 

</html> 


在 这 个 实例 中 ， 就 是 定义 了 表单 提交 的 地 址 为 一 个 邮件 ， 当 程序 运行 后 会 将 表单 中 收集 到 的 内 容 
以 电子 邮件 的 形式 发 送出 去 。 


9.1.2 ”表单 名 称 


name 


名 称 属性 name 用 于 给 表单 命名 。 这 一 属性 不 是 表单 的 必需 属性 , 但 是 为 了 防止 表单 信息 在 提交 到 
后 台 处 理 程序 时 出 现 混 乱 ， 一 般 要 设置 一 个 与 表单 功能 符合 的 名 称 ， 例 如 注册 页 面 的 表单 可 以 命名 为 
register。 不 同 的 表单 尽量 不 用 相同 的 名 称 ， 以 避免 混乱 。 
<form name=" 表 单 名 称 "> 


</form> 
说 明 : 表单 名 称 中 不 能 包含 特殊 符号 和 空格 。 
实例 代码 : 
<html> 
<head> 
<title> 设 定 表单 的 名 称 </title> 
</head> 
<body> 
下 面 是 关于 本 产品 的 调查 内 容 : 


<!-- 这 是 一 个 没有 控件 的 表单 --> 
<form action="mailto:abcd@163.com" name="research"> 
</form> 

</body> 

</html> 


在 该 实例 中 ， 将 表单 命名 为 research。 


9.1.3 ”传送 方法 一 一 method 
表单 的 method 属性 用 来 定义 处 理 程序 从 表单 中 获得 信息 的 方式 ， 可 取 值 为 get 或 post， 它 决定 了 
表单 中 已 收集 的 数据 是 用 什么 方法 发 送 到 服务 器 的 。 
口 、method=get 使 用 这 个 设置 时 ， 表 单数 据 会 被 视 为 CGI 或 ASP 的 参数 发 送 ， 也 就 是 来 访 者 输入 
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的 数据 会 附加 在 URL 之 后 ， 由 用 户 端 直 接 发 送 至 服务 器 ， 所 以 速度 上 会 比 post 快 ， 但 缺点 是 数 
据 长 度 不 能 够 太 长 。 在 没有 指定 method 的 情形 下 ， 一 般 都 会 视 get 为 默认 值 。 

口 method=post: 使 用 这 种 设置 时 ， 表 单数 据 是 与 URL 分 开发 送 的 ， 用 户 端的 计算 机 会 通知 服务 
器 来 读 取 数 据 ， 所 以 通常 没有 数据 长 度 上 的 限制 ， 缺 点 是 速度 上 会 比 get 慢 。 

语法 ; 
<form method=" 传 送 方式 "> 


</form> 
说 明 : 传送 方式 的 值 只 有 两 种 选择 即 get 或 post。 
实例 代码 : 
<html> 
<head> 
<title> 设 定 表单 的 传送 方式 </title> 
</head> 
<body> 
下 面 是 关于 本 产品 的 调查 内 容 : 
<!-- 这 是 一 个 没有 控件 的 表单 --> 
<form action="mailto:abcd@163.com" name="research" method="post"> 
</form> 
</body> 
</html> 


在 这 个 实例 里 ， 表 单 research 的 内 容 将 会 以 post 的 方式 通过 电子 邮件 的 形式 传送 出 去 。 
9.1.4 编码 方式 一 一 enctype 


表单 中 的 enctype 参数 用 于 设置 表单 信息 提交 的 编码 方式 。 
语法 : 
<form enctype=" 编 码 方式 "> 


</form> 


说 明 : enctype 属性 为 表单 定义 了 MIME 编码 方式 ， 编 码 方式 的 取 值 见 表 9-1。 
表 9-1 目标 窗口 的 设置 


enctype 取 值 取 值 的 含义 
Text/plain 以 纯 文本 的 形式 传送 
application /x-www-form-urlencoded 默认 的 编码 形式 


multipart/form-data MIME 编 码 ， 上 传 文件 的 表单 必须 选择 该 项 


实例 代码 : 


<html> 
<head> 
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<title> 设 定 表单 的 编码 方式 </title> 
</head> 
<body> 
下 面 是 关于 本 产品 的 调查 内 容 : 
<!- 这 是 一 个 没有 控件 的 表单 --> 
<form action="mailto:abcd@163.com" name="research" method="post" enctype="Text/plain"> 
</form> 
</body> 
</html> 


在 这 个 实例 中 ， 设 置 了 表单 信息 以 纯 文本 的 编码 形式 发 送 。 
9.1.5 目标 显示 方式 一 一 target 


target 属性 用 来 指定 目标 窗口 的 打开 方式 。 表 单 的 目标 窗口 往往 用 来 显示 表单 的 返回 信息 ,例如 是 
否 成 功 提交 了 表单 的 内 容 、 是 否 出 错 等 。 
语法 : 
<form target=" 目 标 窗口 的 打开 方式 "> 
</form> 
说 明 : 目标 窗口 的 打开 方式 包含 4 个 取 值 : _blank、_parent、_self 和 _top。 其 中 _blank 是 指 将 返回 
的 信息 显示 在 新 打开 的 窗口 中 ，_parent 是 指 将 返回 信息 显示 在 父 级 的 浏览 器 窗口 中 ，_self 则 表示 将 返 
回信 息 显示 在 当前 浏览 器 窗口 ，_top 表示 将 返回 信息 显示 在 顶级 浏览 器 窗口 中 。 
实例 代码 ; 
<html> 
<head> 
<title> 设 定 表单 的 目标 窗口 打开 方式 </title> 
</head> 
<body> 
下 面 是 关于 本 产品 的 调查 内 容 : 
<!-- 这 是 一 个 没有 控件 的 表单 --> 
<formaction="mailto:abcd@163.com" name="research" method="post" enctype="Text/plain "target=”self"> 
</form> 
</body> 
</html> 
在 这 个 实例 中 ， 设 置 表单 的 返回 信息 将 在 同一 窗口 中 显示 。 
以 上 所 讲解 的 只 是 表单 的 基本 构成 标记 , 而 表单 的 <form> 标 记 只 有 和 它 所 包含 的 具体 控件 相 结 
合 才能 真正 实现 表单 收集 信息 的 功能 。 下 面 就 对 表单 中 各 种 功能 的 控件 的 添加 方法 加 以 说 明 。 
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9.2 添加 控件 


按照 控件 的 填写 方式 可 以 分 为 输入 类 和 菜单 列表 类 。 输入 类 的 控件 一 般 以 input 标记 开始 ,说明 这 一 
控件 需要 用 户 的 输入 ; 而 菜单 列表 类 则 以 select 开始 ， 表 示 用 户 需要 选择 。 按 照 控 件 的 表现 形式 则 可 以 
将 控件 分 为 文本 类 、 选 项 按钮 、 菜 单 等 几 种 。 

在 HTML 表单 中 , input 参数 是 最 常用 的 控件 标记 , 包括 最 常见 的 文本 域 、 按 钮 都 是 采用 这 个 标记 。 


这 个 标记 的 基本 语法 是 : 
<form> 
<input name=" 控 件 名 称 " type=" 控 件 类 型 "> 
</form> 


在 这 里 ， 控 件 名 称 是 为 了 便于 程序 对 不 同 控件 的 区 分 ， 而 type 参数 则 是 确定 了 这 一 个 控件 域 的 类 
型 。 在 HTML 中 ，input 参数 所 包含 的 控件 类 型 可 以 见 表 9-2。 


表 9-2 ”输入 类 控件 的 Type 可 选 值 


type 取 值 取 值 的 含义 

text 文字 字段 

password 密码 域 ， 用 户 在 页 面 中 输入 时 不 显示 具体 的 内 容 ， 以 * 代 替 
radio 单 选 按钮 

checkbox. 复 选 框 

button 普通 按钮 

submit 提交 按钮 

reset 重 置 按钮 

image 图 形 域 ， 也 称 为 图 像 提交 按钮 

hidden 隐藏 域 ， 隐 藏 域 将 不 显示 在 页 面 上 ， 只 将 内 容 传递 到 服务 器 中 
file 文件 域 


除了 输入 类 型 的 控件 之 外 ， 还 有 一 些 控件 ， 如 文字 区 域 、 菜 单列 表 则 不 是 用 input 标记 的 。 它 们 有 
自己 的 特定 标记 ， 如 文字 区 域 直接 使 用 textarea 标记 ， 菜 单 标记 需要 使 用 select 和 option 标记 结合 ， 这 
些 在 后 面 还 将 详细 介绍 。 


9.3 输入 类 的 控件 


9.3.1 文字 字段 一 一 text 


在 网 页 中 最 常见 的 就 是 文本 字段 的 表单 ， 例 如 网 页 的 用 户 登录 区 。 文 字 字段 的 type 属性 值 为 text， 
而 text 类 型 的 控件 在 页 面 中 以 单行 文本 框 的 形式 显示 ， 在 页 面 中 还 可 以 设置 控件 的 名 称 、 控 件 的 长 度 、 
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最 长 字符 数 等 。 

语法 : <input type="text" name=" 控 件 名 称 " size= 控 件 的 长 度 maxlength= 最 长 字符 数 value=" 文 字 字 
段 的 默认 取 值 "> 

说 明 : 在 该 语法 中 包含 了 很 多 参数 ， 它 们 的 含义 和 取 值 方法 不 同 ， 见 表 9-3。 其 中 name、size、 
maxlength 参数 一 般 是 不 会 省 略 的 参数 。 


表 9-3 text 文 字 字 段 的 参数 表 


参数 类 型 含义 
文字 字段 的 名 称 ， 用 于 和 页 面 中 其 他 控件 加 以 区 别 ， 命 名 时 不 

能 包含 特殊 字符 ， 也 不 能 以 HTML 预 留 字 作 为 名 称 
size 定义 文本 框 在 页 面 中 显示 的 长 度 ， 以 字符 作为 单位 
maxlength 定义 在 文本 框 中 最 多 可 以 输入 的 文字 数 
value 用 于 定义 文本 框 中 的 默认 值 

实例 代码 : 

<html> 

<head> 

<title> 在 表单 中 添加 文字 字段 </title> 

</head> 

<body> 

下 面 是 几 种 不 同属 性 的 文字 字段 : 


<form name="example" action="deal.asp" method="post"> 
<!-- 添 加 一 个 长 度 为 15 的 文本 框 --> 
姓名 : <input type="text" name="usemame" size=15> 
<br> 
< 上 -添加 一 个 长 度 为 15， 但 是 最 长 字符 为 2 的 文本 框 --> 
年 龄 : <input type="text" name="age" size=15 maxlength=2> 
<br> 
< 上 -- 添 加 一 个 长 度 为 15， 但 最 多 可 输入 30 个 字符 ， 默 认 显 示 “http:/” 的 文本 框 -> 
个 人 主页 : <input type="text" name="privateweb" size=15 maxlength=30 value="http://"> 
</form> 
</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 儿 种 不 同 大 小 的 文字 字段 控件 ， 如 图 9-2 所 示 。 


个 人 主页 ， etzs77 
到 
Ea En] 到 


图 9-2 在 页 面 中 添加 文字 字段 
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9.3.2 ”密码 域 一 一 password 


在 网 页 中 有 一 种 特殊 的 文本 字段 ， 它 在 页 面 中 的 效果 和 文本 字段 相同 ， 但 是 当 用 户 输入 文字 时 ， 
这 些 文字 只 显示 “*”， 这 种 控件 称 为 密码 域 。 
语法 : <input type="password" name=" 控 件 名 称 "size= 控 件 的 长 度 maxlength= 最 长 字符 数 value=" 
文字 字段 的 默认 取 值 "> 
说 明 : 在 该 语法 中 包含 了 很 多 参数 ， 它 们 的 含义 和 取 值 见 表 9-4。 其 中 name、size、maxlength 参 
数 一 般 是 不 会 省 略 的 参数 。 
表 9-4 text 文 字 字 段 的 参数 表 


域 的 名 称 ， 用 于 和 页 面 中 其 他 控件 加 以 区 别 ， 命 名 时 不 能 包含 
特殊 字符 ， 也 不 能 以 HTML 预 留 字 作为 名 称 


定义 密码 域 的 文本 框 在 页 面 中 显示 的 长 度 ， 以 字符 作为 单位 
定义 在 密码 域 的 文本 框 中 最 多 可 以 输入 的 文字 数 
用 于 定义 密码 域 的 默认 值 ， 同 样 以 “#” 显 示 


实例 代码 : 


<html> 
<head> 
<title> 在 表单 中 添加 密码 域 </title> 
</head> 
<body> 
下 面 是 几 种 不 同 效果 的 密码 域 : 
<form name="example" action="deal.asp" method="post"> 
<!-- 添 加 一 个 长 度 为 22 的 密码 域 --> 
登录 密码 : <input type="password" name="username" size=22> 
<br> 
<!-- 添 加 一 个 长 度 为 22， 但 是 最 多 可 以 输入 30 个 字符 的 密码 域 -> 
支付 密码 : <input type="password" name="age" size=22 maxlength=30> 
<br> 
<|-- 添 加 一 个 长 度 为 22、 最 多 可 输入 30 个 字符 、 默 认 密 码 设置 为 12345 的 密码 域 --> 
原始 密码 : <input type="password" name="privateweb" size=22 maxlength=30 value="12345"> 
</form> 
</body> 
</html> 


运行 这 段 代 码 ， 可 以 看 到 几 种 不 同 大 小 的 密码 域 控件 ， 如 图 9-3 所 示 。 
在 页 面 中 输入 文字 html， 可 以 看 到 出 现在 文本 框 中 的 内 容 不 是 文字 本 身 ， 而 是 4 个 星 号 “*”， 如 
图 9-4 所 示 。 
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PE WEE) + 寺 -加 习 斗 局 的 四 ww 各 对 本- 也 ” 

[ln etre ee ma Wit Esetomane raris tlsp7 ps hin 了 ma 
下 面 是 几 种 不 同 效 采 的 密码 起 下 面 是 几 种 不 同 效果 的 密码 域 ， 司 
加 

[| 到 


图 9-3 在 页 面 中 添加 密码 域 图 9-4 在 密码 域 中 输入 文字 


9.3.3 ” 单 选 按钮 一 一 radio 


在 网 页 中 ， 单 选 按钮 用 来 让 浏览 者 进行 单一 选择 ， 在 页 面 中 以 圆 框 表 示 。 在 单 选 按钮 控件 中 必须 
设置 参数 value 的 值 。 而 对 于 一 个 选择 中 的 所 有 单 选 按钮 来 说 ， 往 往 要 设 定 同样 的 一 个 名 称 ， 这 样 在 传 
递 时 才能 更 好 地 对 某 一 个 选择 内 容 的 取 值 进行 判断 。 

语法 ，<input type="raido" value=" 单 选 按钮 的 取 值 " name=" 单 选 按钮 名 称 " checked> 

说 明 : 在 该 语法 中 ，checked 属性 表示 这 一 单 选 按钮 默认 被 选中 ， 而 在 一 个 单 选 按钮 组 中 只 能 有 一 
项 单 选 按钮 控件 设置 为 checked。value 则 用 来 设置 用 户 选 中 该 项 目 后 ， 传 送 到 处 理 程序 中 的 值 。 

实例 代码 : 

<html> 

<head> 

<title> 在 表单 中 添加 单 选 按钮 </title> 


</head> 
<body> 


<h2> 心 理 小 测试 ， 脱 鞋 方式 见 人 心 </h2> 
Tm 家 ， 在 门口 脱 下 了 鞋子 ， 从 脱 下 鞋子 的 摆 放 形式 ， 可 以 反映 出 你 的 性 格 的 中 心 部 分 呢 。 试 试看 吧 : 
i name="example" action="deal.asp" method="post"> 

<input type="radio" name="test" value="answerA" checked> 鞋 尖 朝 入 口 处 排 好 

i type="radio" name="test" value="answerB" > 鞋 尖 朝 进来 的 方向 排 好 

0 type="radio" name="test" value="answerC" > 就 是 脱 掉 的 样子 

<br> EE 


<input type="radio" name="test" value="answerD" > 由 同 住 在 | es eee en rasarared 


一 起 的 人 帮 你 脱 | 
</form> | 到 小 浊 试 ， 胶 竺 方式 见 人 必 
</body> 日 必 下 了 整 于， 从 路 T 攻 了 的 提 我 式 可 以 反 民 出 作风 中 部 分 
</html> 
运行 程序 , 可 以 看 到 在 页 面 中 包含 了 4 个 单 选 按钮 , 如 图 9-5 | 
所 示 。 


9-5 添加 单 选 按钮 
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9.3.4” 复 选 框 一 一 checkbox 


在 网 页 设计 中 ， 有 一 些 内 容 需 要 让 浏览 者 以 选择 的 形式 填写 ， 而 选择 的 内 容 可 以 是 一 个 ， 也 可 以 
是 多 个 ， 这 时 就 需要 使 用 复 选 框 控件 checkbox。 复 选 框 在 页 面 中 以 一 个 方 框 来 表示 。 

语法 : <input type="checkbox" value=" 复 选 框 的 值 " name=" 名 称 " checked> 

说 明 : 在 该 语法 中 ，checked 参数 表示 该 选项 在 默认 情况 下 已 经 被 选中 ， 一 个 选择 中 可 以 有 多 个 复 
选 框 被 选中 。 

实例 代码 : 


<html> 

<head> 

<title> 在 表单 中 添加 复 选 框 </title> 

</head> 

<body> 

请 在 下 面 的 选项 中 选择 您 喜欢 的 运动 : 
<form name="example" action="deal.asp" method="post"> 

<input type="checkbox" name="test" value="A2" checked> 竞 走 
<input type="checkbox" name="test" value="A3"> 体 操 
<input type="checkbox" name="test" value="A1" checked> 保 龄 
<input type="checkbox" name="test" value="A4" > 自行 车 
<br> 
<input type="checkbox" name="test" value="A5" > 登山 
<input type="checkbox" name="test" value="A6" > 长 跑 
<input type="checkbox" name="test" value="A7" > 武术 
<input type="checkbox" name="test" value="A8" > 游泳 
<br> 
<input type="checkbox" name="test" value="A11" > 网 球 
<input type="checkbox" name="test" value="A12" > 篮球 
<input type="checkbox" name="test" value="A9" > 排球 
<input type="checkbox" name="test" value="A10" > 乒乓 球 


</form> 

</body> 

</html> 

运行 代码 ， 效 果 如 图 9-6 所 示 。 
EE] 
Er 
EE ER EE EPE 

| 


请 青 下 面 的 专项 中 次 笃 炮 喜 欢 的 运动 


克 章 走 上 体操 所 保 给 三 自 和 车 
三 语 山 长 下 三 臣 太 三 洁 洒 
天 风味 记得 太 上 排球 广 天 


习 | 
司 二 [| 「 


9-6 ”添加 复 选 框 的 效果 
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9.3.5 ”普通 按钮 一 一 button 


在 网 页 中 按钮 也 很 常见 ， 在 提交 页 面 、 恢 复 选 项 时 常常 用 到 。 普 通 按钮 一 般 情 况 下 要 配合 脚本 来 
进行 表单 处 理 。 
语法 : <input type="button" name=" 按 钮 名 " value=" 按 钮 的 取 值 " onclick=" 处 理 程序 "> 
说 明 : value 的 取 值 就 是 显示 在 按钮 上 面 的 文字 ， 而 在 button 中 可 以 通过 添加 onclick 参数 来 实现 
一 些 特殊 的 功能 ，onclick 参数 是 设置 当 鼠 标 按 下 按钮 时 所 进行 的 处 理 。 
实例 代码 : 
<html> 
<head> 
<title> 在 表单 中 添加 普通 按钮 </title> 
</head> 
<body> 
下 面 是 几 个 有 不 同 功能 的 按钮 : <br><br> 
<form name="example" action="deal.asp" method="post"> 
<!-- 在 页 面 中 添加 一 个 普通 按钮 --> 
<input type="button" value=" 普 通 按 钮 " name="button1" > 
<!-- 在 页 面 中 添加 一 个 关闭 当前 窗口 的 按钮 -> 
<input type="button" name="close" value=" 关 闭 当前 窗口 " onclick="window.close()"> 
< 上 L-- 在 页 面 中 添加 一 个 打开 新 窗口 的 按钮 -> 
<input type="button" name="opennew" value=" 打 开 窗口 "onclick="window.open()"> 
</form> 
</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 如 图 9-7 所 示 的 效果 。 

单 击 页 面 中 的 “普通 按钮 ”按钮 ， 页 面 不 会 有 任何 变化 ， 因 为 在 “普通 按钮 ”按钮 的 代码 中 没有 
设置 处 理 程序 ， 如 果 单 击 “ 关 闭 当前 窗口 ”按钮 ， 会 弹出 一 个 关闭 警告 的 窗口 ， 如 图 9-8 所 示 。 

单 击 警告 窗口 中 的 “是 (Y) ”按钮 ， 则 会 成 功 关闭 当前 窗口 ， 和 否则 返回 。 单 击 页 面 中 的 “打开 窗 
口 ”按钮 ， 会 弹出 一 个 新 的 窗口 ， 如 图 9-9 所 示 。 
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9-7 添加 按钮 图 9-8 单 击 “ 关 闭 当前 窗口 ”按钮 后 图 9-9 打开 新 的 窗口 


9.3.6 ”提交 按钮 一 一 submit 


提交 按钮 是 一 种 特殊 的 按钮 , 不 需要 设置 onclick 参数 , 在 单 击 该 类 按钮 时 可 以 实现 表单 内 容 的 提交 。 


*，162 。 HTML 网 页 设计 参考 手册 


语法 : <input type="submit" name=" 按 钮 名 " value=" 按 钮 的 取 值 "> 
说 明 : 在 该 语法 中 ，value 同样 用 来 设置 按钮 上 显示 的 文字 。 
实例 代码 : 


<html> 
<head> 
<title> 添 加 提交 按钮 </title> 
</head> 
<body> 
下 面 是 关于 本 网 站 的 调查 内 容 : 
<form action="mailto:abcd@163.com" name="research" method="post"> 
<p> 登 录用 户 名 : 
<input name="username'" type="text" size=20> 
</p> 
<p> 登 录 密码 : 
<input name="password" type="password" size=20> 
</p> 
重复 密码 : 
<p> 
<input name="password2" type="password" size=20> 
</p> 
<hr> 
<p> 调 查 的 具体 内 容 : </p> 
<p> 所 在 城市 : 
<input name="city" type="radio" value="radiobutton" checked> 北 京 &nbsp;&nbsp; 
<input name="city" type="radio" value="radiobutton"> 上 海 &nbsp;&nbsp; 
<input name="city" type="radio" value="radiobutton"> 天 津 &nbsp;&nbsp; 
<input name="city" type="radio" value="radiobutton"> 深 圳 &nbsp;&nbsp; 
<input name="city" type="radio" value="radiobutton"> 其 他 &nbsp;<input name="city" type="text"> 
</p> 
<p> 关 心 的 内 容 : 
<input name="content" type="checkbox" value="checkbox" checked> 新 闻 栏 目 &nbsp;&nbsp;&nbsp; 
<input name="content" type="checkbox" value="checkbox"> 体 育 栏目 &nbsp;&nbsp;&nbsp; 
<input name="content2" type="checkbox" value="checkbox"> 科 技 内 容 &nbsp;&nbsp;&nbsp; 
<input name="content3" type="checkbox" value="checkbox"> 动 漫 卡通 <br> 
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<input name="content4" type="checkbox" value="checkbox"> 财 经 证 券 &nbsp;&nbsp;&nbsp; 
<input name="content5" type="checkbox" value="checkbox"> 娱 乐 生 活 &nbsp;&nbsp;&nbsp; 
<input name="content6" type="checkbox" value="checkbox"> 汽 车 房产 &nbsp;&nbsp;&nbsp; 
<input name="content7" type="checkbox" value="checkbox"> 出 国旅 游 </p> 
<p> 
<input type="submit" name="Submit" value=" 提 交 "> 
</p> 
</form> 
</body> 
</html> 


由 代码 可 知 ， 本 页 面 的 信息 将 以 电子 邮件 的 形式 传送 。 运 行 这 段 代 码 ， 效 果 如 图 9-10 所 示 。 
单 击 页 面 中 的 “提交 ”按钮 ， 则 会 弹出 一 个 打开 如 图 9-11 所 示 的 提示 窗口 ， 提 醒 用 户 将 会 以 电子 


邮件 的 方式 将 表单 内 容 传送 出 去 。 
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图 9-10 设置 页 面 的 效果 图 9-11 提交 表单 的 提示 窗口 


9.3.7 ” 重 置 按钮 一 一 reset 


在 页 面 中 还 有 一 种 特殊 的 按钮 ， 称 为 重 置 按钮 。 这 类 按钮 可 以 用 来 清除 用 户 在 页 面 中 输入 的 信息 。 


说 明 : 


<input type="reset" name=" 按 钮 名 " value=" 按 钮 的 取 值 "> 
在 该 语法 中 ，value 同样 用 来 设置 按钮 上 显示 的 文字 。 


实例 代码 : 


<html> 


<head> 
<title> 添 加 重 置 按钮 </title> 
</head> 
<body> 

下 面 是 某 网 站 的 注册 页 面 : 


<form action="mailto:abcd@163.com" name="research" method="post"> 


<p> 用 户 名 : 
<input name="username'" type="text" size=20> 
</p> 
<p> 登 录 密 码 : 
<input name="password" type="password" size=20> 


</p> 


<p> 重 复 密码 : 
<input name="password2" type="password" size=20> 
</p> 
<p> 证 件 类 型 : 
<input name="papertype" type="text" size=20> 
</p> 
<p> 证 件 号 码 : 
<input name="papernum" type="text" size=20 maxlength=35> 
</p> 
<p> 出 生日 期 : 
<input name="date" type="text" size=20> 
</p> 
<p> 联 系 方式 : 


i HTML 网 页 设计 参考 手册 


<input name="touch" type="text" size=20 maxlength=50> 
</p> 
<p> 所 在 城市 : 
<input name="city" type="radio" value="radiobutton" checked> 北 京 &nbsp;&nbsp; 
<input name="city" type="radio" value="radiobutton"> 上 海 &nbsp;&nbsp; 
<input name="city" type="radio" value="radiobutton"> 天 津 <br> 
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<input name="city" type="radio" value="radiobutton"> 深 圳 &nbsp;&nbsp; 
<input name="city" type="radio" value="radiobutton"> 其 他 &nbsp;<input name="city" type="text"> 
</p> 
<p> 关 心 的 栏目 : 
<input name="content" type="checkbox" value="checkbox" checked> 新 闻 栏 目 &nbsp;&nbsp;&nbsp; 
<input name="content" type="checkbox" value="checkbox"> 体 育 栏目 &nbsp;&nbsp;&nbsp; 
<input name="content2" type="checkbox" value="checkbox"> 科 技 内 容 <br> 
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<input name="content3" type="checkbox" value="checkbox"> 动 漫 卡通 &nbsp;&nbsp;&nbsp; 
<input name="content4" type="checkbox" value="checkbox"> 财 经 证 券 &nbsp;&nbsp;&nbsp; 
<input name="content5" type="checkbox" value="checkbox"> 娱 乐 生活 <br> 
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<input name="content6" type="checkbox" value="checkbox"> 汽 车 房产 &nbsp;&nbsp;&nbsp; 
<input name="content7" type="checkbox" value="checkbox"> 出 国旅 游 
</p> 
<p> 
<input type="submit" name="Submit" value=" 提 交 "> 
&nbspi&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; 
<input type="reset" name="reset" value=" 重 置 "> 
</p> 
</form> 
</body> 
</html> 


运行 代码 ， 效 果 如 图 9-12 所 示 。 
在 浏览 器 中 添加 部 分 信息 后 ， 效 果 如 图 9-13 所 示 。 单 
全 部 被 清除 ， 又 恢复 到 了 图 9-12 所 示 的 效果 。 


贞 “ 重 置 ”按钮 ， 会 发 现 填写 页 面 中 的 内 容 
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图 9-12 添加 重 置 按钮 图 9-13 ”填写 部 分 表单 内 容 
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9.3.8 ”图 像 域 一 一 image 


在 页 面 中 还 有 一 种 控件 形式 ， 称 为 图 像 域 ， 常 用 在 创建 特殊 效果 的 按钮 中 ， 因 此 也 常常 被 称 为 图 
像 提交 按钮 。 

语法 : 《input type="image" src=" 图 像 地 址 " name=" 图 像 域名 称 "> 

说 明 : 在 该 语法 中 ， 图 像 地 址 可 以 是 绝对 地 址 或 相对 地 址 。 

实例 代码 : 


<html> 
<head> 
<title> 添 加 图 像 提交 按钮 </title> 
</head> 
<body> 
下 面 是 关于 本 网 站 的 调查 内 容 : 
<form action="mailto:abcd@163.com" name="research" method="post"> 
<p> 登 录用 户 名 : 
<input name="username'" type="text" size=20> 
</p> 
<p> 登 录 密 码 : 
<input name="password" type="password" size=20> 
</p> 
<p> 重 复 密码 : 
<input name="password2" type="password" size=20> 
</p> 
<hr> 
<p> 关 心 的 内 容 : 
<input name="content" type="checkbox" value="checkbox" checked> 新 闻 栏目 &nbsp;&nbsp;&nbsp; 
<input name="content" type="checkbox" value="checkbox"> 体 育 栏目 &nbsp;&nbsp;&nbsp; 
<input name="content2" type="checkbox" value="checkbox"> 科 技 内 容 &nbsp;&nbsp;&nbsp; 
<input name="content3" type="checkbox" value="checkbox"> 动 漫 卡通 <br> 
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<input name="content4" type="checkbox" value="checkbox"> 财 经 证 券 &nbsp;&nbsp;&nbsp; 
<input name="content5" type="checkbox" value="checkbox"> 娱 乐 生 活 &nbsp;&nbsp;&nbsp; 
<input name="content6" type="checkbox" value="checkbox"> 汽 车 房产 &nbsp;&nbsp;&nbsp; 
<inputname="content7" type="checkbox" 
value="checkbox"> 出 国旅 游 </p> 


<p> 
<input type="image" src="pic01.jpg" name="image1"> 
</p> 
</form> 
</body> 
</html> 
夫 心 的 内 容 ， 到 新 闻 栏 目 。 三 体育 栏目 。 口 科技 内 容 。 口 动 济 卡 通 
运行 这 段 代码 ， 效果 如 图 9-14 所 示 。 厂 财经 证 券 。 厂 欣 乐 生活 。 厂 折 车 房产 。 三 出 因 旅 游 
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图 9-14 运行 代码 的 效果 
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9.3.9 ”隐藏 域 一 一 hidden 


表单 中 的 隐藏 域 主要 用 来 传递 一 些 参 数 ， 而 这 些 参数 不 需要 在 页 面 中 显示 。 当 浏览 者 提交 表单 时 ， 
隐藏 域 的 内 容 会 一 起 提交 给 处 理 程序 。 

语法 : <input type="hidden" name=" 隐 藏 域名 称 " value=" 提 交 的 值 "> 

实例 代码 : 


<html> 
<head> 
<title> 在 表单 中 添加 隐藏 域 </title> 
</head> 
<body> 
下 面 是 几 种 不 同属 性 的 文字 字段 : 
<form name="example" action="deal.asp" method="post"> 
<!-- 添 加 一 个 长 度 为 15 的 文本 框 -> 
姓名 : <input type="text" name="Usemame" size=15> 
<br> 
<!-- 添 加 一 个 长 度 为 15， 但 是 最 长 字符 只 有 2 的 文本 框 -> 
年 龄 : <input type="text" name="age" size=15 maxlength=2> 
<br> 
< 上 -添加 一 个 长 度 为 15， 但 最 多 可 输入 30 个 字符 ， 默 认 显 示 “http://” 的 文本 框 -> 
个 人 主页 : <input type="text" name="privateweb" size=15 maxlength=30 value="http:/"> 
<!-- 添 加 隐藏 内 容 --> 
<input type="hidden" name="page_id" value="example "> 
</form> 
</body> 
</html> 


运行 这 段 代码 ， 隐 藏 域 的 内 容 并 不 能 显示 在 页 面 中 ， 但 是 在 提交 表单 时 ， 其 名 称 page_id 和 取 值 
example 将 会 同时 传递 给 处 理 程 序 。 


9.3.10 文件 域 一 file 


文件 域 在 上 传 文件 时 常常 用 到 ， 它 用 于 查找 硬盘 中 的 文件 路 径 ， 然 后 通过 表单 将 选中 的 文件 上 传 。 
在 设置 电子 邮件 的 附件 、 上 传 头 像 、 发 送 文件 时 常常 会 看 到 这 一 控件 。 

语法 : <input type="file" name=" 文 件 域 的 名 称 "> 

实例 代码 : 

<html> 

<head> 

<title> 添 加 文件 域 </title> 

</head> 

<body> 

下 面 是 某 网 站 的 注册 页 面 : 


<form action="mailto:abcd@163.com" name="research" method="post"> 
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<p> 用 户 名 : 
<input name="username'" type="text" size=20> 
</p> 
<p> 登 录 密 码 : 
<input name="password" type="password" size=20> 
</p> 
<p> 重 复 密码 : 
<input name="password2" type="password" size=20> 
</p> 
<p> 证 件 类 型 : 
<input name="papertype" type="text" size=20> 
</p> 
<p> 证 件 号 码 : 
<input name="papernum" type="text" size=20 maxlength=35> 
</p> 
<p> 联 系 方式 : 
<input name="touch" type="text" size=20 maxlength=50> 
</p> 
<p> 所 在 城市 : 
<input name="city" type="radio" value="radiobutton" checked> 北 京 &nbsp;&nbsp; 
<input name="city" type="radio" value="radiobutton"> 上 海 &nbsp;&nbsp; 
<input name="city" type="radio" value="radiobutton"> 天 津 &nbsp;&nbsp; 
<input name="city" type="radio" value="radiobutton"> 深 圳 &nbsp;&nbsp; 
<input name="city" type="radio" value="radiobutton"> 其 他 &nbsp;<input name="city" type="text"> 
</p> 
<p> 
<!-- 在 这 里 添加 了 一 个 文件 域 -> 
请 上 传 你 的 头像 图 片 <input type="file" name="picture"> 
</p> 
<p> 关 心 的 栏目 : 
<input name="content" type="checkbox" value="checkbox" checked> 新 闻 栏 目 &nbsp;&nbsp;&nbsp; 
<input name="content" type="checkbox" value="checkbox"> 体 育 栏目 &nbsp;&nbsp;&nbsp; 
<input name="content2" type="checkbox" value="checkbox"> 科 技 内 容 &nbsp;&nbsp;&nbsp; 
<input name="content3" type="checkbox" value="checkbox"> 动 漫 卡通 <br> 
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<input name="content4" type "checkbox"> 财 经 证 券 &nbsp;&nbsp;&nbsp; 
<input name="content5" type="checkbox" value="checkbox"> 娱 乐 生 活 &nbsp;&nbsp;&nbsp; 
<input name="content6" type="checkbox" value="checkbox"> 汽 车 房产 &nbsp;&nbsp;&nbsp; 
<input name="content7" type="checkbox" value="checkbox"> 出 国旅 游 </p> 
<p> 
<input type="submit" name="Submit" value=" 提 交 "> 
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; 
<input type="reset" name="reset" value=" 重 置 "> 
</p> 
</form> 
</body> 
</html> 


运行 这 段 代 码 ， 可 以 看 到 页 面 中 添加 了 一 个 “浏览 ……” 按 钮 ， 单 击 这 一 按钮 会 打开 “选择 文件 ” 
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对 话 框 ， 如 图 9-15 所 示 。 
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图 9-15 添加 文件 域 


9.4 菜单 列表 类 的 控件 


菜单 列表 类 的 控件 主要 用 来 进行 选择 给 定 答案 中 的 一 种 ， 这 类 选择 往往 答案 比较 多 ， 使 用 单 选 按 
钮 比较 浪费 空间 。 可 以 说 ， 菜 单列 表 类 的 控件 主要 是 为 了 节省 页 面 空间 而 设计 的 。 菜 单 和 列表 都 是 通 
过 <select> 和 <option> 标 记 来 实现 的 。 


9.4.1 下 拉 菜 单 


下 拉 菜 单 是 一 种 最 节省 页 面 空间 的 选择 方式 ， 因 为 在 正常 状态 下 只 显示 一 个 选项 ， 单 击 按钮 打开 
菜单 后 才 会 看 到 全 部 的 选项 。 
<select name=" 下 拉 菜 单 的 名 称 "> 
<option value=" 选 项 值 " selected> 选 项 显示 内 容 


<option value=" 选 项 值 "> 选项 显示 内 容 
</select> 
说 明 : 在 该 语法 中 ,选项 值 是 提交 表单 时 的 值 ， 而 选项 显示 的 内 容 才 是 真正 在 页 面 中 显示 的 选项 。 
selected 表示 该 选项 默认 情况 下 是 选中 的 ， 一 个 下 拉 菜 单 中 只 能 有 一 项 默认 被 选中 。 
实例 代码 : 
<html> 
<head> 
<title> 添 加 下 拉 莱 单 </title> 
</head> 
<body> 
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下 面 是 某 网 站 的 注册 页 面 : 
<form action="mailto:abcd@163.com" name="research" method="post"> 
<p> 用 户 名 : 
<input name="username'" type="text" size=20> 
</p> 
<p> 登 录 密 码 : 
<input name="password" type="password" size=20> 
<p> 
<p> 重复 密码 : 
<input name="password2" type="password" size=20> 
</p> 
<p> 证 件 类 型 : 
<select name="cardtype"> 
<option value="id_card" selected> 身 份 证 
stu_card"> 学 生 证 
drive_card"> 驾 驶 证 
<option value="other_card"> 其 他 证 件 
</select> 
</p> 
<p> 证 件 号 码 : 
<input name="cardmum" type="text" size=20 maxlength=35> 
</p> 
<p> 联 系 方式 : 
<input name="touch" type="text" size=20 maxlength=50> 
</p> 
<p> 关 心 的 栏目 : 
<input name="content" type="checkbox" value="checkbox" checked> 新 闻 栏目 &nbsp;&nbsp;&nbsp; 
<input name="content" type="checkbox" value="checkbox"> 体 育 栏目 &nbsp;&nbsp;&nbsp; 
<input name="content2" type="checkbox" value="checkbox"> 科 技 内 容 &nbsp;&nbsp;&nbsp; 
<input name="content3" type="checkbox" value="checkbox"> 动 漫 卡通 <br> 
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<input name="content4" type="checkbox" value="checkbox"> 财 经 证 券 &nbsp;&nbsp;&nbsp; 
<input name="content5" type="checkbox" value="checkbox"> 娱 乐 生活 &nbsp;&nbsp;&nbsp; 
<input name="content6" type="checkbox" value="checkbox"> 汽 车 房产 &nbsp;&nbsp;&nbsp; 
<input name="content7" type="checkbox" value="checkbox"> 出 国旅 游 </p> 
<p> 
<input type="submit" name="Submit" value=" 提 交 "> 
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; 
<input type="reset" name="reset" value=" 重 置 "> 


</p> 
</form> 
</body> 
</html> 
运行 这 段 代码 ， 可 以 看 到 页 面 中 添加 了 包含 4 个 选项 的 下 拉 菜 ”=m 镭 
单 ， 其 中 “身份 证 ”选项 被 设置 为 默认 ， 如 图 9-16 所 示 。 ee ee 和 
[3 


图 9-16 添加 下 拉 菜 单 
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9.4.2 ”列表 项 


列表 项 的 设置 方法 与 下 拉 菜 单 类 似 。 不 同 的 是 ， 列 表 项 在 页 面 中 可 以 显示 出 儿 条 信息 ， 一 旦 超出 
这 个 信息 数量 ， 在 列表 右 侧 会 出 现 滚动 条 ， 拖 动 滚动 条 可 以 看 到 所 有 的 选项 。 
语法 
<select name=" 列 表 项 名 称 " size=" 显 示 的 列表 项 数 " multiple> 
<option value=" 选 项 值 " selected> 选 项 显示 内 容 
<option value=" 选 项 值 "> 选项 显示 内 容 


</select> 
说 明 : 在 该 语法 中 ，size 设 定 页 面 中 的 最 多 列表 项 数 ， 当 超过 这 个 值 时 会 出 现 深 动 条 。multiple 表 
示 这 一 列表 可 以 进行 多 项 选择 。 选 项 值 是 提交 表单 时 的 值 ， 而 选项 显示 内 容 才 是 真正 在 页 面 中 显示 的 
选项 。 
实例 代码 : 


<html> 
<head> 
<title> 添 加 列表 项 </title> 
</head> 
<body> 
下 面 是 某 网 站 的 注册 页 面 : 
<form action="mailto:abcd@163.com" name="research" method="post"> 
<p> 用 户 名 : 
<input name="username" type="text" size=20> 
</p> 
<p> 登 录 密码 : 
<input name="password" type="password" size=20> 
</p> 
<p> 重 复 密码 : 
<input name="password2" type="password" size=20> 
</p> 
<p> 证 件 类 型 : 
<select name="cardtype"> 
<option value="id_card" selected> 身 份 证 
<option value="stu_card"> 学 生 证 
<option value="drive_card"> 驾 驶 证 
<option value="other_card"> 其 他 证 件 
</select> 
</p> 
<p> 证 件 号 码 : 
<input name="cardmum" type="text" size=20 maxlength=35> 
</p> 
<p> 联 系 方式 : 
<input name="touch" type="text" size=20 maxlength=50> 
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</p> 
<p> 关 心 的 栏目 : 
<select name="content" size=5 multiple> 
<option value="M1" selected> 体 育 栏目 
<option value="M2"> 科 技 内 容 
<option value="M3"> 新 闻 栏 目 
<option value="M4"> 卡 通 动漫 
<option value="M5" selected> 财 经 证 券 
<option value="M6"> 娱 乐 生活 
<option value="M7"> 汽 车 房产 
<option value="M8"> 出 国旅 游 
</select> 
</p> 
<p> 
<input type="submit" name="Submit" value=" 提 交 "> 


&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; 


<input type="reset" name="reset" value=" 重 置 "> 
</p> 
</form> 
</body> 
</html> 


i 


运行 这 段 代码 ,可 以 看 到 页 面 上 添加 了 一 个 列表 选项 ， 其 中 显示 的 选项 个 数 为 5， 并 可 以 进行 多 项 


选择 ， 其 中 “体育 栏目 ”和 “财经 证 券 ” 两 项 是 默认 被 选中 的 栏目 ， 如 图 9-17 所 示 。 
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9-17 添加 列表 项 
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9.5 文本 域 标记 一 一 textarea 


除了 以 上 讲解 的 两 大 类 控件 外 ， 还 有 一 种 特殊 定义 的 文本 样式 ， 称 为 文字 域 或 文本 域 。 它 与 文字 
字段 的 区 别 在 于 可 以 添加 多 行文 字 ， 从 而 可 以 输入 更 多 的 文本 。 这 类 控件 在 一 些 留 言 板 中 最 为 常见 。 
语法 ; 
<textarea name=" 文 本 域名 称 " value=" 文 本 域 默 认 值 " rows= 行 数 cols= 列 数 > 
</textarea> 
说 明 : 在 该 语法 中 ，rows 是 指 文本 域 的 行 数 ， 也 就 是 高 度 值 ， 当 文本 内 容 超出 这 一 范围 时 会 出 现 
滚动 条 ; cols 设置 文本 域 的 列 数 ， 也 就 是 其 宽度 。 
实例 代码 : 


<html> 
<head> 
<title> 添 加 文本 域 </title> 
</head> 
<body> 
下 面 是 某 网 站 的 留言 页 面 : 
<form action="mailto:abcd@163.com" name="research" method="post"> 
<p> 用 户 名 : 
<input name="username'" type="text" size=20> 
</p> 
<p> 密 &nbsp;&nbsp; 码 : 
<input name="password" type="password" size=20> 
</p> 
<p> 留 言 : <br> 
<textarea name="word" rows=5 cols=70> 
</textarea> 
</p> 
<p> 
<input type="submit" name="Submit" value=" 提 交 "> 
&nbspi&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
<input type="reset" name="reset" value=" 重 置 "> 


sp> 下 而 和 共计 页 面 ， 
</form> RFPS 
</body> 二 3 广 一 一 
</html> EE 
运行 代码 ， 可 以 看 到 页 面 上 添加 了 一 个 行 数 为 5、 列 数 3 
为 70 的 文本 域 ， 如 图 9-18 所 示 。 | a 


TE 


图 9-18 添加 文本 域 的 效果 
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9.6 id 标记 


在 HTML 的 表单 元 素 中 , 还 有 一 个 id 标记。 这 一 标记 是 一 个 较为 特殊 的 标记 ， 它 主要 用 于 标示 一 
个 惟一 的 元 素 。 这 个 元 素 可 以 是 文字 字段 ， 可 以 是 密码 域 ， 也 可 以 是 其 他 的 表单 元 素 ， 甚 至 也 可 以 定 
义 一 幅 图 像 、 一 个 表格 。 但 是 在 实际 应 用 中 ， 表 单 是 使 用 id 标记 最 多 的 一 类 元 素 。 

基本 语法 : <id=" 元 素 的 标识 名 "> 

说 明 : 在 HTML 中 , 由 于 id 用 来 标识 页 面 的 惟一 元 素 ， 因 此 在 定义 标识 名 时 最 好 要 根据 其 含义 进 
行 命名 。 

实例 代码 ; 

<html> 

<head> 

<title> 添 加 文本 域 </title> 

</head> 

<body> 

下 面 是 某 网 站 的 留言 页 面 : 
<form action="mailto:abcd@163.com" name="research" method="post"> 
<p> 用 户 名 : 
<input name="username" type="text" size=20 id="usemame"> 
</p> 
<p> 密 &nbsp;&nbsp; 码 : 
<input name="password" type="password" size=20> 
</p> 
<p> 留 言 : <br> 
<textarea name="word" rows=5 cols=70> 
</textarea> 
</p> 
<p> 
<input type="submit" name="Submit" value=" 提 交 "> 
&nbspi&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; 
<input type="reset" name="reset" value=" 重 置 "> 
</p> 
</form> 
</body> 
</html> 


在 该 实例 中 ， 定 义 了 用 户 名 的 文字 字段 id 为 username。 而 在 运行 程序 时 ， 页 面 中 并 不 显示 该 id， 
只 是 在 将 信息 传送 到 服务 器 时 会 同时 被 提交 。 


杠 染 结构 


窗口 框架 简介 

向 置 框架 集 的 基本 属性 
设置 窗 呈 属性 

浮动 框架 

框架 与 链接 


各 于 于 吾 至 


框架 的 最 主要 功能 是 用 来 “分 着 ”页 面 窗口 ， 使 每 个 “小 窗口 ”能 显示 不 同 
的 HTML 文件 ， 这 样 的 页 面 结构 就 称 为 框架 结构 的 页 面 ， 而 这 些 “ 小 窗口 ”就 
被 称 为 框架 的 “窗口 "。 可 以 说 框架 就 是 将 网 页 画面 分 成 几 个 窗口 ， 同 时 取得 多 
个 URL。 本 章 将 详细 讲解 各 种 框架 标记 的 使 用 。 
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10.1 窗口 框架 简介 


10.1.1 什么 是 框架 


如 果 页 面 可 以 分 为 几 个 部 分 ， 各 个 部 分 之 间 是 相互 独立 的 页 面 ， 却 又 互相 有 关联 ， 用 户 在 浏览 这 
种 页 面 时 ， 当 对 其 中 某 一 部 分 进行 操作 ， 如 浏览 、 下 载 时 ， 其 他 页 面 会 保持 不 变 ， 这 样 的 页 面 就 被 称 
为 框架 结构 的 页 面 ， 也 称 为 多 窗口 页 面 。 

实际 上 框架 对 象 本 身 也 是 一 类 窗口 ， 它 继承 了 窗口 对 象 的 所 有 特征 ， 并 拥有 所 有 的 属性 和 方法 。 

使 用 框架 最 主要 的 目的 就 是 创建 链接 的 结构 ， 最 常见 的 框架 结构 就 是 将 网 站 的 导航 条 作为 一 个 单 
独 的 框架 窗口 ， 当 用 户 查 看 具体 的 内 容 时 ， 导 航 条 窗口 保持 不 变 ， 这 就 为 用 户 的 浏览 提供 了 方便 。 


10.1.2 框架 的 基本 结构 


框架 主要 包含 两 个 部 分 ， 一 个 是 框架 集 ， 另 一 个 就 是 具体 的 框架 文件 。 
框架 集 就 是 用 来 定义 这 一 HTML 文件 为 框架 模式 ， 并 设 定 视窗 如 何 分 割 的 文件 。 通 俗 一 点 地 说 ， 
框架 集 就 是 存放 框架 结构 的 文件 ， 也 是 访问 框架 文件 的 入 口 文件 。 如 果 网 页 由 左右 两 个 框架 组 成 ， 那 
么 除了 左右 两 个 网 页 文件 之 外 ， 还 有 一 个 总 的 框架 集 文件 。 
框架 是 页 面 中 定义 的 每 一 个 显示 区 域 ， 也 可 以 说 一 个 窗口 就 是 一 个 框架 。 框 架 页 面 中 最 基本 的 内 
容 就 是 框架 集 文件 ， 它 是 整个 框架 页 面 的 导航 文件 ， 其 基本 语法 如 下 ; 
<html> 
<head> 
<title> 框 架 页 面 的 标题 </title> 
</head> 
<frameset> 


</frameset> 
</html> 
从 上 面 的 语法 结构 中 可 以 看 到 , 在 使 用 框架 的 页 面 中 , <body> 主 体 标记 被 框架 标记 <frameset> 所 代 
替 。 而 对 于 框架 页 面 中 包含 的 每 一 个 框架 ， 都 是 通过 <frame> 标 记 来 定义 的 。 


10.2 设置 框架 集 的 基本 属性 


框架 页 面 的 结构 也 是 在 框架 集 文件 中 定义 的 ， 一 般 情况 下 ， 根 据 框架 的 分 割 方式 来 分 类 ， 主 要 包 
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含 3 种 框架 结构 ， 分 别 是 : 
口 水 平分 割 窗 口 。 
口 垂直 分 割 窗 口 。 
口 柳 套 分 割 窗 口 。 
下 面 对 框 架 集 的 结构 和 一 些 基本 属性 进行 详细 的 说 明 。 


10.2.1 水 平分 割 窗口 一 一 rows 


水 平分 割 窗口 是 将 页 面 沿 水 平方 向 切割 ， 也 就 是 将 页 面 分 成 上 下 排列 的 多 个 窗口 。 
语法 : 
<frameset rows=" 框 架 窗 口 的 高 度 ,框架 窗口 的 高 度 ,…… ty 
<frame> 
<frame> 


</frameset> 
说 明 : 在 该 语法 中 ，rows 中 可 以 取 多 个 值 ， 每 个 值 表示 一 个 框架 窗口 的 水 平 宽度 ， 它 的 单位 可 以 
是 像素 ， 也 可 以 是 占 浏览 器 的 百分比 。 但 是 要 注意 的 是 ， 一 般 设 定 了 几 个 rows 的 值 ， 就 需要 有 儿 个 杠 
架 ， 即 需要 有 相应 数量 的 <frame> 参 数 。 
实例 代码 : 
<html> 
<head> 
<title> 水 平分 割 窗口 的 效果 </title> 
</head> 
<frameset rows="30%,70%"> 
<frame> 
<frame> 
</frameset> 
</html> 


运行 代码 ， 可 以 看 到 页 面 被 分 割 成 上 下 两 个 窗口 ， 效 果 如 图 10-1 所 示 。 当 浏览 器 大 小 变化 时 ， 框 
架 也 会 随 之 等 比例 缩放 。 
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图 10-1 水 平分 割 窗口 
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10.2.2 ”垂直 分 割 窗口 一 一 cols 


垂直 分 割 窗口 就 是 将 页 面 沿 垂直 方向 分 割 成 多 个 窗口 ， 也 就 是 将 页 面 分 成 左右 排列 的 多 个 窗口 。 
语法 ; 
<frameset cols=" 框 架 窗 口 的 宽度 ,框架 窗口 的 宽度 ,…… "> 
<frame> 
<frame> 
</frameset> 
说 明 : 在 该 语法 中 ，cols 中 可 以 取 多 个 值 ， 每 个 值 表示 一 个 框架 窗口 的 水 平 宽度 ， 它 的 单位 可 以 
是 像素 ， 也 可 以 是 占 浏览 器 的 百分比 。 与 水 平分 割 窗口 相同 ， 一 般 设 定 了 几 个 cols 的 值 ， 就 需要 有 几 
个 框架 ， 也 就 是 有 几 个 <frame> 参 数 。 
实例 代码 : 
<html> 
<head> 
<title> 垂 直 分 割 窗 口 的 效果 </title> 
</head> 
<frameset cols="20%,55%,25%"> 
<frame> 
<frame> 
<frame> 
</frameset> 
</html> 
运行 代码 ， 可 以 看 到 页 面 被 分 割 成 3 个 窗口 ， 其 中 左右 两 个 宽 。 ia Bas 
度 相同 ， 效 果 如 图 10-2 所 示 。 当 浏览 器 大 小 变化 时 ， 框 架 也 会 随 之 图 10-2 ”垂直 分 割 窗口 
等 比例 缩放 。 


10.2.3 ” 赃 套 分 割 窗 口 


嵌 套 分 割 窗 口 就 是 在 一 个 页 面 中 ， 既 有 水 平分 割 的 框架 ， 又 有 垂直 分 割 的 框架 。 
语法 : 
<frameset rows=" 框 架 窗口 的 高 度 ,框架 窗口 的 高 度 ,……- 
<frame> 


<frameset cols=" 框 架 窗口 的 宽度 ,框架 窗口 的 宽度 ,……* Ws 


</frameset> 
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<frame> 
</frameset> 
当然 ， 也 可 以 先进 行 垂直 分 割 ， 再 进行 水 平分 割 。 其 语法 如 下 : 
<frameset cols=" 框 架 窗口 的 宽度 ,框架 窗口 的 宽度 ,……- 
<frame> 


<frameset rows=" 框 架 窗口 的 高 度 ,框架 窗口 的 高 度 ,…… Ps 


</frameset> 
<frame> 


</frameset> 
这 两 种 结构 的 原理 与 注意 事项 和 另外 两 种 结构 相同 ， 主 要 是 需要 注意 窗口 大 小 的 设置 与 窗口 个 数 
的 统一 。 
实例 代码 : 
<html> 
<head> 
<title> 幅 套 分 割 窗口 的 效果 </title> 
</head> 
<frameset rows="30%,70%"> 
<frame> 
<frameset cols="20%,55%,25%"> 
<frame> 
<frame> 
<frame> 
</frameset> 
</frameset> 
</html> 


由 代码 可 以 看 出 ， 首 先 将 页 面 进 行 水 平分 割 成 上 下 两 个 窗口 ， 接 着 下 面 的 框架 又 被 垂直 分 割 成 3 
个 窗口 。 因 此 下 面 的 框架 标记 <frame> 被 框架 集 标 记 代替 。 运 行程 序 ， 效 果 如 图 10-3 所 示 。 
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图 10-3 嵌 套 分 割 的 效果 
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10.2.4 设置 边框 一 一 frameborder 


由 前 面 的 几 个 实例 可 以 看 出 ， 在 默认 情况 下 ， 框 架 窗口 的 四 周 有 一 条 边框 线 ， 通 过 frameborder 参 
数 可 以 调整 边框 线 的 显示 情况 。 

语法 : <frameset frameborder=" 是 否 显 示 "> 或 <frame frameborder=" 是 否 显示 "> 

说 明 : frameborder 的 取 值 只 能 为 0 或 1。 如 果 取 值 为 0， 那 么 边框 线 将 会 被 隐藏 ， 如 果 取 值 为 1， 
边框 线 将 会 显示 。 在 frameset 中 设置 将 会 对 整个 框架 有 效 ， 在 frame 中 设置 则 只 对 当前 这 个 框架 有 效 。 

实例 代码 : 


<html> 

<head> 

<title> 设 置 框架 窗口 的 边框 显示 效果 </title> 
</head> 


<frameset rows="20%,55%,25%"> 
<frame frameborder="1"> 
<frameset cols="35%,65%" frameborder="0"> 
<frame > 
<frame> 
</frameset> 
<frame frameborder="0"> 
</frameset> 
</html> 
运行 这 段 代码 ， 可 以 看 到 页 面 中 的 部 分 边框 被 隐藏 ， 如 图 10-4 所 示 。 当 鼠标 移动 到 窗口 中 间 时 会 
变 成 4+* ， 按 下 鼠标 会 看 到 隐藏 的 边框 ， 如 图 10-5 所 示 。 
ol 
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图 10.4 隐藏 框架 的 边框 图 10-5 按 下 鼠标 的 效果 
10.2.5 ”框架 的 边框 宽度 一 一 framespacing 


框架 的 边框 宽度 在 默认 情况 下 是 1 像素 ， 通 过 参数 framespacing 可 以 调整 其 大 小 。 

语法 : <frameset framespacing=" 边 框 宽度 "> 

说 明 : 边框 宽度 就 是 在 页 面 中 各 个 边框 之 间 的 线条 宽度 ， 以 像素 为 单位 。 而 这 一 参数 只 能 对 框架 
集 使 用 ， 对 单个 框架 无 效 。 
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实例 代码 : 


<html> 
<head> 
<title> 设 置 框架 的 边框 宽度 </title> 
</head> 
<frameset rows="30%,70%" framespacing="10"> 
<frame> 
<frameset cols="20%,55%,25%" framespacing="30"> 
<frame> 
<frame> 
<frame> 
</frameset> 
</frameset> 
</html> 


运行 这 段 程序 ， 效 果 如 图 10-6 所 示 。 


10-6 ”设置 框架 的 边框 宽度 


10.2.6 ”框架 的 边框 颜色 一 一 bordercolor 


使 用 参数 bordercolor 可 以 设置 框架 集 的 边框 颜色 。 

语法 : <frameset bordercolor=" 颜 色 代 码 "> 

说 明 : 该 参数 同样 只 对 整个 框架 集 有 效 ， 对 于 单个 框架 无 效 。 
实例 代码 : 


<html> 
<head> 
<title> 设 置 框架 的 边框 颜色 </title> 
</head> 
<frameset rows="30%,70%" framespacing="10" bordercolor ="#CC99FF"> 
<frame> 
<frameset cols="20%,55%,25%" framespacing="30" bordercolor ="#9900FF"> 
<frame> 
<frame> 
<frame> 
</frameset> 
</frameset> 
</html> 


运行 这 段 代 码 ， 可 以 看 到 两 个 框架 集 设置 了 不 同 的 边框 颜色 ， 
效果 如 图 10-7 所 示 。 I mes 
图 10-7 设置 边框 颜色 


四 
EC [ =] 
LE: OF LE WE 

J em 


四 


*，182 。 HTML 网 页 设计 参考 手册 


10.3 设置 窗口 属性 


在 框架 结构 的 页 面 中 ， 每 一 个 框架 窗口 都 有 一 个 显示 页 面 ， 这 个 页 面 称 为 框架 页 面 。 框 架 页 面 的 
属性 设置 都 在 <frame> 标 记 里 进行 。 


10.3.1 页 面 源 文件 一 一 src 


框架 结构 中 的 各 个 页 面 都 是 一 个 单独 的 文件 ， 而 这 些 文件 是 通过 src 参数 进行 设置 的 。 

语法 : <frame src=" 页 面 源 文件 地 址 "> 

说 明 : 页 面 文件 是 框架 页 面 的 具体 内 容 所 在 ， 对 于 没有 设置 源 文件 的 框架 ， 只 是 空白 页 面 ， 是 没 
有 任何 作用 的 。 页 面 的 源 文件 可 以 是 正常 的 HTML 文件 ， 也 可 以 是 一 个 图 片 或 者 其 他 的 文件 。 

为 了 说 明 框 架 的 参数 效果 ， 首 先 设 置 一 个 框架 页 面 的 内 容 ， 代 码 如 下 : 


<html> 
<head> 
<title> 段 落 的 缩 进 效 果 </title> 
</head> 
<body> 
相传 ， 两 千 五 百年 前 ， 春 秋 时 期 的 大 音乐 家 俞 伯 牙 ， 曾 学 琴 于 程 廉 先生 ， 三 年 不 成 。 后 来 他 沿 着 孔子 的 足迹 
登 游 泰山 ， 
<blockquote> 观 东海 日 出 ， 看 云雾 变化 ，</blockquote> 
<blockquote><blockquote> 闻 松 风 长 啸 ， 听 水 涛 吃 里，</blockquote></blockquote> 
<blockquote><blockquote><blockquote> 拜 大 自然 为 师 ， 琴 艺 大 有 长 进 ， 
</blockquote></blockquote></blockquote> 
<blockquote><blockquote><blockquote><blockquote> 写 出 了 著名 的 古琴 曲 高 山 和 流水 。 
</blockquote></blockquote></blockquote></blockquote> 
</body> 
</html> 


将 这 一 文件 命名 为 src01.html， 将 其 保存 在 框架 集 文件 的 同一 目录 下 ， 然 后 再 设置 框架 集 文件 的 代 
人 码 如 下 : 


<html> 

<head> ss | 
<title> 设 置 页 面 源 文件 </title> 2 EIR EE A 
</head> 


<frameset rows="30%,70%"> 
<frame src="pic01.gif’> 
<frame src="src01.html"> 
</frameset> 
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运行 这 段 代码 ， 效 果 如 图 10-8 所 示 。 
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10.3.2 页 面 名 称 一 一 name 


sl83. 


页 面 名 称 是 为 了 便于 页 面 的 查找 和 链接 所 提供 的 一 个 属性 。 框 架 的 页 面 名 称 中 不 允许 包含 特殊 字 


这 段 代码 分 别 为 上 下 两 个 框架 页 面 命名 为 pic 和 text， 运行 代码 时 并 不 会 显示 框架 名 ， 因 此 不 会 影 


符 、 连 字符 -、 空 格 等 ， 必 须 是 单个 的 单词 或 者 字母 组 合 。 
语法 : <frame src=" 页 面 文件 地 址 " name=" 页 面 名 称 "> 
实例 代码 : 
<html> 
<head> 
<title> 设 置 页 面 名 称 </title> 
</head> 
<frameset rows="30%,70%"> 

<frame src="pic01.gif' name="pic"> 
<frame src="src01.html" name="text"> 
</frameset> 
</html> 
响 框 架 的 显示 效果 。 


noresize 


10.3.3 ”调整 窗口 的 尺寸 


由 图 10-5 可 以 看 出 ， 当 用 鼠标 拖 动 框架 的 边框 时 ， 框 架 窗口 的 尺寸 就 会 随 之 变化 。 如 果 希 望 框架 


窗口 的 大 小 保持 不 变 ， 可 以 设置 noresize 参数 。 
语法 : <frame src=" 页 面 文件 地 址 " noresize> 


说 明 : 在 frame 标记 中 添加 noresize 参数 ， 就 表示 框架 窗口 的 尺寸 不 能 改变 。 


实例 代码 : 


<html> 

<head> 

<title> 禁 止 改 变 框架 窗口 的 尺寸 </title> 

</head> 

<frameset rows="30%,70%"> 
<frame src="pic01.gif’ name="pic" noresize> 
<frame src="src01.html" name="text"> 

</frameset> 

</html> 


运行 这 段 代码 后 , 将 鼠标 放置 在 框架 边框 上 时 , 光标 不 
会 变 为 双 箭头 形状 了 ， 也 无 法 拖 动 框架 的 边框 ， 如 图 10-9 
所 示 。 
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10-9 禁止 调整 窗口 尺寸 
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10.3.4 边框 与 页 面 内容 的 水 平 边 距 一 一 marginwidth 


框架 页 面 与 HTML 中 的 表格 一 样 ， 也 可 以 设置 边框 与 页 面 内 容 的 水 平 边 距 。 
语法 : <frame src=" 页 面 文件 地 址 " marginwidth=" 水 平 边 距 > 

说 明 : 水 平 边 距 用 于 设置 页 面 的 左右 边缘 与 框架 边框 的 距离 ， 单 位 是 像素 。 
首先 创建 一 个 src02.html 页 面 ， 代 码 如 下 : 


<html> 
<head> 
<title> 设 置 水 平 边 距 </title> 
</head> 
<body> 

<br> 

<h3><font color="#009933"> 美 丽 的 江南 小 镇 </font></h3> 

<hr> 

<font color="#009966"><br> 

穿 镇 而 过 的 狭窄 河道 ， 一 座 座 雕 刻 精致 的 石 桥 ， 傍 河 而 筑 的 民居 ， 民 居 楼 板 底 下 就 是 水 ， 石 阶 的 埠头 从 楼 板 
下 一 级 级 伸 出 来 ， 女 人 正在 埠头 上 浣 洗 ， 而 离 他 们 只 有 几 尺 远 的 乌 蓬 船上 正 升 起 一 缕 白 白 的 炊烟 ， 炊 烟 穿 过 桥 洞 
标 到 对 岸 ， 对 岸 河 边 有 又 低 又 宽 的 石 栏 ， 可 坐 可 身 ， 几 位 老人 满 脸 宁静 地 坐 在 那里 看 着 过 往 船只 。 比 之 于 沈从文 
笔下 的 湘西 河 边 由 吊脚楼 组 成 的 小 镇 ， 江 南小 镇 少 了 那 种 浑 朴 奇 险 ， 多 了 一 点 畅达 平稳 。 它 们 的 前 边 没 有 险滩 ， 
后 边 没 有 荒漠 ， 因 此 虽然 幽 个 却 谈 不 上 什么 气势 ,它们 大 多 很 有 一 些 年 代 了 ， 但 始终 比较 滋润 的 生活 方式 并 没有 
让 它们 保留 下 多 少 废墟 和 遗迹 ， 因 此 也 昕 不 出 多 少 历史 的 浩 叹 ， 它 们 当然 有 过 升 沉 荣辱 ， 但 实在 也 未 曾 摆 出 过 太 
堂皇 的 场面 ， 因 此 也 不 容易 产生 类 似 于 朱雀 桥 、 乌 衣 若 的 沧桑 之 慨 。 总 之 ， 它 们 的 历史 路 程 和 现实 风貌 都 显得 平 
实 而 耐久 ， 狭 窄 而 您 入， 就 像 经 纬 着 它们 的 条 条 石板 街道 。 

</font> 
</body> 
</html> 


创建 框架 页 面 集 代码 如 下 : 


<html> 
<head> 
<title> 设 置 水 平 边 距 </title> 
</head> 
<frameset cols="35%,65%"> 
<frame src="pic02.jpg" name="pic" > 
<frame src="src02.html" name="text" marginwidth="70"> 
</frameset> 
</html> 


运行 这 段 代码 ， 可 以 看 到 右 侧 的 框架 页 面 中 ， 文 本 内 容 与 框 
架 的 边框 之 间 设 置 了 很 大 的 空间 , 从 而 显得 宽松 很 多 , 如 图 10-10 
所 示 。 


10-10 ”设置 水 平 边 距 
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10.3.5 边框 与 页 面 内 容 的 垂直 边 距 一 一 marginheight 


与 水 平 边 距 类 似 ， 通 过 marginheight 参数 可 以 设置 边框 与 页 面 的 垂直 边 距 。 
语法 : <frame src=" 页 面 文件 地 址 " marginheight=-" 垂 直 边 距 "> 
说 明 : 垂直 边 距 用 来 设置 页 面 的 上 下 边缘 与 框架 边框 的 距离 ， 单 位 是 像素 。 
实例 代码 : 
<html> 
<head> 
<title> 设 置 垂直 边 距 </title> 
</head> 
<frameset cols="35%,65%"> 
<frame src="pic02.jpg" name="pic" > 
<frame src="src02.html" name="text" marginwidth="70" marginheight="90"> 
</frameset> 
</html> 


运行 这 段 代 码 ， 可 以 看 到 右 侧 的 框架 页 面 中 ,文本 内 容 与 框架 的 上 下 边框 之 间 设置 了 很 大 的 空间 ， 
如 图 10-11 所 示 。 
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图 10-11 设置 垂直 边 距 的 效果 
10.3.6 ”设置 框架 滚动 条 显示 一 一 scrolling 


在 默认 情况 下 ， 当 页 面 的 内 容 超 出 浏览 器 窗口 的 大 小 时 ， 页 面 会 自动 添加 滚动 条 以 方便 用 户 浏览 。 
但 是 有 时 用 户 希望 不 显示 滚动 条 ， 这 可 以 通过 设置 scrolling 参数 来 实现 。 

语法 : <frame src=" 页 面 源 文件 " scrolling=" 是 否 显示 滚动 条 "> 

说 明 : scrolling 参数 在 这 里 只 能 取 Yes、No 或 Auto 三 个 值 中 的 一 个 。 其 中 ，Yes 表示 一 直 显 示 滚 
动 条 ， 而 No 则 表示 无 论 什么 情况 都 不 显示 滚动 条 ; Auto 是 系统 的 默认 值 ， 它 是 根据 具体 内 容 来 调整 
的 ， 也 就 是 说 当 页 面 长 度 超出 浏览 器 窗口 的 范围 时 就 会 自动 显示 滚动 条 。 

实例 代码 : 

<html> 

<head> 
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<title> 设 置 垂直 边 距 </title> 


</head> 
frameset cols="35%,65%"> 
<frame src="pic02.jpg" name="pic" scrolling="Yes"> 
<frame src="src02.html" name="text" marginwidth="70" marginheight="90" scrolling="No"> 
/frameset> 
/html> 


ba 


届 
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运行 这 段 代 码 ， 可 以 看 到 如 图 10-12 所 示 的 效果 。 与 图 10-11 相对 比 ， 可 以 看 出 设置 scrolling 为 
Yes 时 ， 即 使 页 面 内 容 远 远 小 于 浏览 器 的 大 小 ， 也 会 显示 滚动 条 ; 而 当 scrolling 设置 为 No 时 ， 即 使 内 


容 超 二 


10.3 


H 了 浏览 器 的 范围 ， 也 没有 显示 滚动 条 。 
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图 10-12 ”设置 滚动 条 的 效果 


.7 不 支持 框架 标记 一 一 noframes 


对 于 一 些 低 版 本 的 浏览 器 来 说 ， 如 果 不 支 持 框架 结构 就 无 法 打开 框架 页 面 ， 但 这 样 还 不 够 ， 因 为 
它 并 不 清楚 为 什么 打 不 开 页 面 。 通 过 noframes 参数 可 以 设置 一 些 内 容 (包括 文字 或 图 片 ) 来 告诉 浏览 
者 其 浏览 器 无 法 打开 框架 页 面 。 


<html> 

<head> 

<title> 框 架 页 面 的 标题 </title> 
</head> 


<frameset> 


</noframe> 
</frameset> 
</html> 
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说 明 : 在 该 语法 中 ，<noframe> 和 </noframe> 标 记 之 间 的 部 分 就 是 在 不 支持 框架 的 浏览 器 中 所 要 显 


示 的 内 容 。 它 可 以 与 <body> 标 记 一 样 添加 内 容 。 


实例 代码 : 


<html> 
<head> 
<title> 设 置 水 平 边 距 </title> 
</head> 
<frameset cols="35%,65%"> 
<frame src="pic02.jpg" name="pic" > 
<frame src="src02.html" name="text"> 
<noframe> 
<center> 
<p> 对 不 起 ， 您 的 浏览 器 不 支持 框架 页 面 ， 因此 无 法 显示 此 
页 面 ! </p> 
<img src="pic03.jpg"> 
</center> 
</noframe> 
</frameset> 


运行 这 段 代码 后 ， 当 用 户 的 浏览 器 不 支持 框架 结构 时 ， 就 是 直 


接 显示 <noframe> 标 记 内 如 图 10-13 所 示 的 页 面 内 容 。 


10.4 浮 


对 不 起 ， 息 的 浏览 器 不 支持 柜 架 页 面 ， 因 此 无 法 旺 示 此 页 面 ! 


图 10-13 显示 <noframe> 标 记 内 的 内 容 


动 框架 


浮动 框架 是 一 种 较为 特殊 的 框架 ， 它 是 在 浏览 器 窗口 中 嵌 套 子 窗口 ， 也 就 是 整个 页 面 并 不 是 框架 


语法 : 
<iframe src=" 页 面 源 文件 > 


</iframe> 


页 面 ， 但 是 却 包含 一 个 框架 窗口 ， 在 框架 窗口 内 显示 相应 的 页 面 内 容 。 


说 明 : 与 普通 框架 结构 类 似 ， 浮 动 框架 也 可 以 设置 很 多 参数 ， 见 表 10-1。 


表 10-1 浮动 框架 的 参数 设置 


浮动 框架 可 以 设置 的 参数 参数 的 含义 
Src 浮动 框架 页 面 的 源 文件 地 址 
width 浮动 框架 在 页 面 中 显示 的 宽度 
height 浮动 框架 在 页 面 中 显示 的 高 度 
iin 浮动 框架 页 面 在 浏览 器 中 的 对 齐 方式 ， 可 以 为 左 
对 齐 、 右 对 齐 或 居中 对 齐 
name 设 定 框架 页 面 的 名 称 
marginwidth 设置 页 面 与 边框 的 水 平 间距 
marginheight 设置 页 面 与 边框 的 垂直 间距 
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续 表 
浮动 框架 可 以 设置 的 参数 参数 的 含义 
scrolling 设 定 浮动 框架 页 面 内 是 否 显示 滚动 条 
frameborder 设 定 浮动 框架 的 边框 


从 表 10-1 中 可 以 看 出 , 很 多 普通 框架 页 面 的 属性 在 浮动 框架 页 面 中 同样 适用 , 例如 name、scrolling 
等 ， 而 在 普通 框架 中 只 对 框架 集 有 效 的 一 些 参 数 在 这 里 同样 可 以 设置 ， 如 frameborder 等 ， 此 外 浮动 框 
架 页 面 还 可 以 设置 大 小 和 对 齐 方式 。 而 对 于 浮动 框架 来 说 ， 框 架 边框 的 宽度 和 颜色 是 无 法 设置 的 ， 即 
与 普通 框架 相 比 ， 浮 动 框架 中 不 包含 framespacing 和 bordercolor 参数 。 

本 节 将 主要 通过 设置 框架 页 面 的 参数 和 不 设置 进行 对 比 ， 从 而 清晰 地 说 明 各 个 参数 的 功能 。 为 了 
达到 这 一 目的 ， 需 要 进行 如 下 的 准备 工作 : 创建 两 个 普通 的 HTML 页 面 ， 其 中 一 个 作为 浮动 框架 的 载 
体 ， 命 名 为 float.html; 另 一 个 作为 浮动 框架 页 面 的 源 文件 ， 命 名 为 source.html。 

float.html 文件 的 源 代码 如 下 : 


<html> 

<head> 

<title> 未 添加 浮动 框架 的 页 面 </title> 

</head> 

<body> 
<font size="5" color="#CC0000"> 在 这 一 个 页 面 中 将 会 添加 一 个 浮动 框架 页 面 </font> 
<hr size=2> 

</body> 

</html> 


source.html 文件 的 源 代码 如 下 : 


<html> 
<head> 
<title> 浮 动 框架 的 页 面 内 容 </title> 
</head> 
<body> 

<font size="5" color="#000099"> 经 典 影 片 ， 魂 断 蓝 桥 </font><br><br> 

<image src="pic04.jpg" align="left"> 

《 魂 断 蓝 桥 》 作 为 电影 史上 三 大 凄美 不 朽 爱情 影片 之 一 ， 是 一 部 荡气回肠 的 爱情 经 典 之 作 ， 内 容 虽 有 些 传奇 
化 ， 但 文艺 气息 浓厚 ， 具 有 甚 高 的 催泪 效果 。<br> 

《 魂 断 蓝 桥 》 又 名 《滑铁卢 桥 》) 是 一 部 风靡 全 球 近 半 个 世纪 的 美国 爱情 故事 片 ， 也 是 西方 电影 在 东方 获 
得 成 功 的 经 典 。<br> 

<hr> 

剧情 介绍 : <br> 

一 次 偶然 的 机 会 ， 芭 蓄 舞 女 演员 玛 亚 在 滑铁卢 桥 邂 逅 了 高 级 军官 罗 伊 。 由 于 战争 的 原因 ,两 人 决定 马上 结婚 ， 
但 就 在 婚礼 即将 举行 的 前 一 天 晚上 ， 罗 伊 接 到 命令 ， 部 队 当晚 开 拔 。 玛 亚 无 意 中 看 到 了 罗 伊 的 名 字 在 阵亡 名 单 中 。 
此 时 罗 伊 的 母亲 来 看 她 ， 尽 管 这 位 贵 夫人 非常 和 东 可 亲 ， 但 此 时 的 玛 亚 已 情绪 混乱 、 言 语 无 礼 、 不 知 所 云 。 为 了 
维持 生活 ， 玛 亚 和 她 的 好 友 都 沦 为 街头 应 招 女郎 。 罗 伊 并 没有 死 ， 他 回来 了 。 玛 亚 的 遭遇 使 她 无 法 面 对 与 罗 伊 的 
婚姻 及 罗 伊 家 族 的 显赫 地 位 。 她 来 到 滑铁卢 桥 ， 毫 无 畏惧 地 向 一 辆 辆 飞驰 的 军车 走 去 。 
</body> 
</html> 


完成 了 两 个 页 面 文 件 之 后 ， 下 面 开始 设置 浮动 框架 页 面 的 内 容 。 
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10.4.1 必需 参数 : 页 面 源 文件 一 一 src 


浮动 框架 中 最 基本 的 参数 就 是 src， 它 用 来 设置 浮动 框架 页 面 的 源 文件 地 址 ， 也 是 浮动 框架 页 面 必 
需 的 参数 。 因 为 只 有 设置 了 源 文件 的 内 容 ， 浮 动 框架 才 有 意义 。 

语法 : <iframe src=" 页 面 源 文件 "> 

下 面 将 文件 source.html 作为 浮动 框架 页 面 的 源 文件 插入 到 HTML 文件 float.html 中 , 实例 代码 如 下 : 


<html> 

<head> 

<title> 添 加 浮动 框架 的 页 面 </title> 

</head> 

<body> 
<font size="5" color="#CC0000"> 在 这 一 个 页 面 中 将 会 添加 一 个 浮动 框架 页 面 </font> 
<hr size=2> 
<iframe src="source.html"> 
</ifrfame> 

</body> 

</html> 


运行 程序 ， 效 果 如 图 10-14 所 示 。 


图 10-14 在 页 面 中 添加 浮动 框架 页 面 


下 面 介绍 在 浮动 框架 页 面 中 可 以 设置 的 一 些 框架 页 面 不 能 设置 的 参数 ， 称 为 浮动 框架 特有 参数 ， 
主要 包括 框架 的 页 面 大 小 以 及 对 齐 方式 。 


10.4.2 ”特有 属性 : 大 小 


width 和 height 


在 普通 框架 结构 中 ， 由 于 框架 就 是 整个 浏览 器 窗口 ， 因 此 不 需要 设置 其 大 小 。 但 是 在 浮动 框架 中 ， 
框架 是 插入 到 普通 HTML 页 面 中 的 ， 所 以 可 以 调整 整个 框架 的 大 小 。 

语法 <iframe src=" 浮 动 框架 页 面 源 文件 " width=" 页 面 宽度 " height=" 页 面 高 度 "> 

说 明 : 在 该 语法 中 ， 页 面 的 宽度 和 高 度 值 都 以 像素 为 单位 。 

下 面 在 float.html 文件 的 基础 上 设置 浮动 框架 页 面 的 大 小 ， 实 例 代 码 如 下 : 


<html> 
<head> 
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<title> 设 置 框架 页 面 的 大 小 </title> 


</head> 
<body> 
<font size="5" color="#CC0000"> 在 这 一 个 页 面 中 将 会 添加 一 个 浮动 
框架 页 面 </font> 
<hr size=2> 
<iframe src="source.html" width="550" height="310"> 
</iframe> 
</body> 
</html> 
运行 这 段 代码 ， 效 果 如 图 10-15 所 示 ， 与 图 10-14 相对 比 , 可 以 | 
看 到 页 面 中 的 框架 大 小 被 调整 得 更 加 协调 。 2 Fa 


图 10-15 ”调整 浮动 框架 页 面 的 大 小 


10.4.3 ”特有 属性 : 对 齐 方式 align 

除了 设置 框架 大 小 的 参数 之 外 ， 设 置 框架 的 对 齐 方式 也 是 浮动 框架 页 面 所 特有 的 参数 。 

语法 : <iframe sre=" 浮 动 框架 页 面 源 文件 " align=" 对 齐 方式 "> 

说 明 : 在 该 语法 中 ， 对 齐 方式 用 来 设置 浮动 框架 页 面相 对 于 浏览 器 窗口 的 水 平 位 置 。 它 可 以 取 的 
值 包括 左 对 齐 left、 右 对 齐 right 和 居中 对 齐 center。 

下 面 在 float.html 文件 的 基础 上 设置 浮动 框架 页 面 的 对 齐 方式 ， 实 例 代码 如 下 : 


<html> 

<head> 

<title> 设 置 对 齐 方 式 </title> 

</head> 

<body> 
<font size="5" color="#CC0000"> 在 这 一 个 页 面 中 将 会 添加 一 个 浮动 框架 页 面 </font> 
<hr size=2> 
<iframe src="source.html" width="550" height="310" align="center"> 
</iframe> 

</body> 

</html> 


运行 这 段 代码 ， 效 果 如 图 10-16 所 示 ， 与 图 10-15 相对 比 ， 可 以 看 到 页 面 中 的 框架 位 置 被 调整 ， 由 
原来 的 左 对 齐 变 成 了 居中 对 齐 。 


图 10-16 设置 对 齐 方 式 
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10.4.4 ”共有 参数 设置 


普通 框架 页 面 和 浮动 框架 页 面 所 共有 的 一 些 参 数 称 为 浮动 框架 的 基本 属性 ， 主 要 包括 src、name、 
marginwidth、marginheight 和 scrolling。 由 于 这 些 参数 的 设置 方法 与 普通 框架 类 似 ， 因 此 下 面 通过 一 个 
实例 简单 介绍 。 对 于 具体 的 参数 可 以 参照 10.3 节 的 内 容 。 
语法 
<iframe src=" 浮 动 框架 页 面 源 文件 name=" 页 面 名 称 ”marginwidth=" 边 框 与 页 面 的 水 平 距离 " 
marginheight=" 边 框 与 页 面 的 垂直 距离 " scrolling=" 是 否 显示 滚动 条 "> 
</iframe> 
说 明 : 在 这 里 ， 这 些 参数 的 取 值 范围 与 普通 框架 相同 ， 因 此 不 再 重复 ， 只 通过 下 面 的 实例 说 明 这 
些 属性 的 设置 效果 。 
实例 代码 : 
<html> 
<head> 
<title> 设 置 框架 的 共有 参数 </title> 
</head> 
<body> 
<font size="5" color="#CC0000"> 在 这 一 个 页 面 中 将 会 添加 一 个 浮动 框架 页 面 </font> 
<hr size=2> 
<iframe src="source.html” width="550” height="310" align="center” name="public"” marginwidth="60" 
marginheight="40" scrolling="No"> 
</iframe> 
</body> 
</html> 


运行 这 段 代码 ， 对 比 图 10-16， 可 以 看 到 框架 页 面 的 内 容 与 边框 增加 了 一 定 的 空间 ， 而 且 在 页 面 中 
虽然 无 法 显示 全 部 的 内 容 ， 但 是 并 没有 出 现 滚动 条 ， 如 图 10-17 所 示 。 
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图 10-17 设置 框架 页 面 的 共有 参数 
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10.4.5 ”其 他 参数 一 一 frameborder 


在 浮动 框架 页 面 中 ， 还 有 另外 一 个 特殊 的 参数 可 以 设置 ， 即 框架 边框 显示 属性 frameborder。 在 普 
通 框架 中 ， 该 参数 既 对 整个 框架 集 有 效 ， 也 对 单个 框架 有 效 。 同 样 地 ， 在 浮动 框架 中 也 可 以 设置 这 一 
参数 。 


语法 ; 
<iframe src=" 浮 动 框架 页 面 源 文件 " frameborder=" 是 否 显示 "> 
</iframe> 


说 明 : 在 这 里 ， 这 些 参数 的 取 值 范围 与 普通 框架 相同 。 其 中 sre 是 浮动 框架 的 页 面 源 文件 ; 
frameborder 只 能 取 0 或 1，0 表示 不 显示 边框 ，! 为 默认 取 值 ， 表 示 显 示 边 框 。 下 面 只 通过 一 个 实例 说 
明 这 些 属性 的 设置 效果 。 

实例 代码 : 


<html> 
<head> 
<title> 设 置 框架 页 面 的 边框 </title> 
</head> 
<body> 
<font size="5" color="#CC0000"> 在 这 一 个 页 面 中 将 会 添加 一 个 浮动 框架 页 面 </font> 
<hr size=2> 
<iframe src="source.html"” width="550" height="310" align="center" name="public"” marginwidth="60 " 
marginheight="40" scrolling="No" frameborder="0"> 
</ifrfame> 
</body> 
</html> 


运行 这 段 代 码 ， 对 比 图 10-16， 可 以 看 到 浮动 框架 的 页 面 边 框 不 见 了 ， 如 图 10-18 所 示 。 


BE 厂矿 厂区 生生 


10-18 ”设置 框架 页 面 的 边框 
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10.5 ”框架 与 链接 


大 部 分 情况 下 ， 在 页 面 中 添加 框架 是 为 了 更 好 地 对 页 面 内 容 进行 导航 ， 因 此 常常 是 通过 框架 进行 


链接 不 同 的 内 容 。 对 于 框架 页 面 来 说 ， 设 置 页 面 的 链接 需要 使 用 target 参数 ， 这 一 参数 的 取 值 不 同 于 
它 在 普通 HTML 页 面 中 的 取 值 ， 下 面 进行 具体 的 介绍 。 


10.5.1 设置 普通 框架 结构 的 链接 


普通 的 框架 结构 之 间 通 过 target 参数 互相 链接 起 来 。 一 般 情况 下 ， 一 个 页 面 中 会 有 一 个 框架 窗口 


作为 导航 页 面 ， 里 面 添加 了 对 另外 一 个 框架 的 内 容 的 链接 设置 ， 而 这 些 链接 则 是 通过 target 实现 的 。 


下 面 通 过 一 个 具体 的 实例 来 讲解 关于 框架 之 间 的 链接 方法 。 
首先 需要 设 定 一 个 框架 集 文件 ， 用 于 确定 框架 页 面 的 整体 布局 ， 这 里 将 文件 命名 为 19layout.html。 
19layout.html 的 实例 代码 如 下 : 


<html> 

<head> 

<title> 框 架 页 面 的 整体 结构 </title> 

</head> 

<frameset rows="150,”> 
<frame src="navig.html" name="navig" scrolling="No" noresize> 
<frame src="content-1.html" name="content"> 

</frameset> 

</html> 


此 处 按照 常见 网 站 的 上 下 结构 进行 布局 ， 将 页 面 上 面 的 框架 窗口 设置 为 150 像素 高 ， 下 面 的 窗口 


则 分 割 剩 下 的 部 分 。 在 该 文件 中 ， 设 置 了 上 面 的 框架 窗口 页 面 为 导航 页 面 ， 命 名 为 navig， 同 时 设置 其 
默认 打开 的 页 面 名 为 navig.html。 同 时 还 设置 该 页 面 窗口 不 显示 滚动 条 ， 而 且 不 允许 调整 窗口 大 小 。 在 
该 文件 中 还 设置 了 下 面 的 框架 窗口 为 内 容 页 面 ,命名 为 content, 设置 默认 打开 的 页 面 名 content-1.html。 


页 ， 


下 面 就 介绍 这 两 个 文件 的 具体 编码 。 其 中 ，navig.html 文件 将 放置 在 框架 的 上 方 ， 作 为 页 面 的 导航 
其 代码 如 下 : 


<html> 

<head> 

<title> 导 航 页 面 </title> 

</head> 

<body> 

<center> 

<img src="pic05.jpg"><br><br> 
<a href="content-1.html" target="content"> 白 蛇 传 </a> 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
<a href="content-2.html" target="content"> 梅 妻 准 子 </a> 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
<a href="content-3.html" target="content"> 菊 花 仙子 </a> 
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</center> 
</body> 
</html> 


在 这 个 文件 代码 中 , target 的 值 是 设置 将 要 显示 页 面 内 容 的 框架 名 称 ， 此 处 设置 为 content， 说 明 设 
置 的 这 3 个 内 容 页 面 将 在 content 框架 窗口 中 显示 。 
content-1.html 文件 是 默认 的 内 容 页 面 ， 其 代码 如 下 : 


<html> 
<head> 
<title> 内 容 页 面 </title> 
</head> 
<body> 

<center> 

<font size=5> 白 蛇 传 </font><br><br> 

</center> 

&nbsp; &nbsp; &nbsp;&nbsp; 清 明 时 分 ， 西 湖岸 边 花红 柳 绿 ， 断 桥 上 面 游 人 如 梭 ， 真 是 一 幅 春 光阴 媚 的 美丽 
画面 。 突 然 ， 从 西湖 底 悄悄 升 上 来 两 个 如 花 似 玉 的 姑娘 ， 怎 么 回 事 ? 人 怎么 会 从 水 里 出 来 呢 ? 原来， 她 们 是 两 条 
修炼 成 了 人 形 的 蛇 精 ， 虽 然 如 此 ， 但 她 们 并 无 害 人 之 心 ， 只 因 羡 幕 世间 的 多 彩 人 生 ， 才 一 个 化 名 叫 和 白素贞， 一 个 
化 名 叫 小 青 ， 来 到 西湖 边 游玩 。<br> 

&nbsp; &nbsp; &nbsp;&nbsp; 偏 偏 老天爷 忽然 发 起 脾气 来 ， 去 时 间 下 起 了 倾盆 大 雨 ， 白 素 贞 和 小 青 被 淋 得 无 
处 藏身 ， 正 发 愁 呢 ， 突 然 只 觉 头 项 多 了 一 把 伞 ， 转 身 一 看 ， 只 见 一 位 温文 尔 雅 、 白 净 秀 气 的 年 轻 书生 撑 着 伞 在 为 
她 们 遮 雨 。 白 素 贞 和 这 小 书生 四 目 相交 ， 都 不 约 而 同 地 红 了 红脸 ， 相 互 产生 了 爱慕 之 情 。 小 青 看 在 眼 里 ， 忙 说 : 
“多 谢 ! 请 问 客 官 尊 姓 大 名 。” 那 小 书生 道 : “我 则 许仙 ， 就 住 在 这 断 桥 边 。” 白 素 贞 和 小 青 也 赶忙 作 了 自我 介 
绍 。 从 此 ， 他 们 三 人 常常 见面 ， 白 素 贞 和 许仙 的 感情 越 来 越 好 ， 过 了 不 久 ， 他 们 就 结 为 夫妻 ， 并 开 了 一 间 “ 保 和 
堂 ”药店 ， 小 日 子 过 得 可 美 了 ! <br> 

&nbsp; &nbsp; &nbsp;&nbsp; 由 于 “ 保 和 堂 ” 治 好 了 很 多 很 多 疑难 病症 ， 而 且 给 穷人 看 病 配 药 还 分 文 不 收 ， 
所 以 药店 的 生意 越 来 越 红 火 ， 远 近来 找 白素贞 治 病 的 人 越 来 越 多 ， 人 们 将 白素贞 亲切 地 称 为 白 娘 子 。 可 是 ，“ 保 
和 堂 ”的 兴隆 、 许 仙 和 白 娘 子 的 幸福 生活 却 惹恼 了 一 个 人 ， 谁 昵 ?” 那 就 是 金山 寺 的 法 海 和 尚 。 因 为 人 们 的 病 都 被 
白 娘子 治 好 了 ， 到 金山 寺 烧 香 求 车 萨 的 人 就 少 多 了 ， 香 火 不 旺 ， 法 海 和 尚 自然 就 高 兴 不 起 来 了 。 这 天 ， 他 又 来 到 
“ 保 和 堂 ”前 ， 看 到 和 白 娘子 正在 给 人 治 病 ， 不 禁 心 内 妒 火 中 烧 ， 再 定 睛 一 瞧 ， 网 呀 ! 原来 这 白 娘子 不 是 凡人 ， 而 
是 条 白蛇 变 的 ! <br> 

&nbsp; &nbsp; &nbsp;&nbsp; 法 海 虽 有 点 小 法 术 ， 但 他 的 心术 却 不 正 。 看 出 了 和 白 娘子 的 身份 后 ， 他 就 想 拆散 
许仙 白 娘 子 夫妇 、 搞 垮 “ 保 和 堂 ”。 于 是 ， 他 偷偷 把 许仙 叫 到 寺中 ， 对 他 说 : “你 娘子 是 蛇 精 变 的 ， 你 快 点 和 她 
分 手 吧 ， 不 然 ， 她 会 吃 掉 你 的 ! ”许仙 一 听 ， 非 常 气愤 ， 他 想 : 我 娘子 心地 善良 ， 对 我 的 情意 比 海 还 深 。 就 算 她 
是 蛇 精 ， 也 不 会 害 我 ， 何 况 她 如 今 已 有 了 身孕 ， 我 怎 能 离弃 她 呢 ! 法 海 见 许仙 不 上 他 的 当 ， 恼 羞 成 怒 ， 便 把 许仙 
关 在 了 寺 里 。<br> 

&nbsp; &nbsp; &nbsp;&nbsp; 在 “ 保 和 堂 ”里 ， 白 娘子 正 焦急 地 等 待 许仙 回来 。 一 天 、 两 天 ， 左 等 、 右 等 ， 
白 娘子 心急 如 焚 。 终 于 打听 到 原来 许仙 被 金山 寺 的 法 海 和 尚 给 “ 留 ” 住 了 ， 白 娘子 赶紧 带 着 小 青 来 到 金山 寺 ， 苦 
苦 哀求 ， 请 法 海 放 回 许仙 。 法 海 见 了 白 娘子 ， 一 阵 冷 笑 ， 说 道 : “大胆 妖 蛇 ， 我 劝 你 还 是 快 点 离开 人 间 ， 否 则 别 
怪我 不 客气 了 ! ”和 白 娘子 见 法 海 拒 不 放 人 ， 无 奈 ， 只 得 拔 下 头 上 的 金 包 ， 迎 风 一 摇 ， 掀 起 滔滔 大 浪 ， 向 金山 寺 直 
逼 过 去 。 法 海 眼见 水 漫 金山 寺 ， 连 忙 脱 下 贺 娑 ， 变 成 一 道 长 堤 ， 拦 在 寺 门 外 。 大 水 涨 一 尺 ， 长 堤 就 高 一 尺 ， 大 水 
涨 一 丈 ， 长 堤 就 高 一 丈 ， 任 赁 波浪 再 大 ， 也 漫 不 过 去 。 再 加 上 和 白 娘 子 有 孕 在 身 ， 实 在 斗 不 过 法 海 ， 后 来 ， 法 海 使 
出 欺诈 的 手法 ， 将 白 娘子 收 进 金 钵 ， 压 在 了 雷 峰 塔下 ， 把 许仙 和 和 白 娘 子 这 对 恩爱 夫妻 活生生 地 拆散 了 。<br> 

&nbsp; &nbsp; &nbsp;&nbsp; 小 青 逃 离 金 山寺 后 ， 数 十 载 深 山 练 功 ， 最 终 打 败 了 法 海 ， 将 他 逼 进 了 螃蟹 腹 中 ， 
救出 了 和 白 娘子 ， 从 此 ， 她 和 许仙 以 及 他 们 的 孩子 幸福 地 生活 在 一 起 ， 再 也 不 分 离 了 。 
</body> 
</html> 
用 同样 的 方法 添加 另外 两 个 内 容 页 面 ， 分 别 命名 为 content-2.html 和 content-3.html， 具 体 的 代码 见 
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配套 光盘 相对 应 的 文件 夹 ， 这 里 不 再 过 多 介绍 。 

完成 这 几 个 文件 之 后 ， 打 开 框 架 集 页 面 ， 效 果 如 图 10-19 所 示 。 

单 击 页 面 中 的 链接 文字 “ 梅 麦 鹤 子 ”， 会 在 框架 的 下 方 页 面 中 显示 content-2.html 文件 的 内 容 ， 如 
图 10-20 所 示 。 
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图 10-19 框架 页 面 首页 效果 图 10-20 链接 到 content-2 页 面 
单 击 页 面 中 的 链接 文字 “菊花 仙子 ”， 会 在 框架 的 下 方 页 面 中 显示 content-3.html 文件 的 内 容 ， 如 
图 10-21 所 示 。 这 就 说 明 ， 在 框架 集中 实现 了 各 个 窗口 页 面 之 间 的 链接 。 


图 10-21 链接 到 content-3 页 面 


10.5.2 浮动 框架 与 链接 


在 浮动 框架 中 同样 也 可 以 制作 页 面 之 间 的 链接 ， 其 方法 与 普通 框架 类 似 ， 下 面 依然 通过 实例 来 
说 明 。 
浮动 框架 所 在 的 主页 面 命 名 为 20float.html， 代 码 如 下 : 


<html> 
<head> 
<title> 浮 动 框架 窗口 的 链接 </title> 
</head> 
<body> 
<center> 
<img src="pic05.jpg"><br><br> 
<a href="content-1.html" target="content"> 白 蛇 传 </a> 
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&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
<a href="content-2.html" target="content"> 梅 妻 准 子 </a> 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
<a href="content-3.html" target="content"> 菊 花 仙子 </a> 


<br><br> 
</center> 


<iframe src="content-1.html" name="content" width="500" height="170" align="center"> 


</iframe> 
</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 如 图 10-22 所 示 的 效果 。 


单 击 其 中 的 链接 文字 “菊花 仙子 ”， 可 以 在 下 面 的 浮动 框架 页 面 中 打开 content-3.html 文件 的 内 容 ， 
如 图 10-23 所 示 。 由 此 可 见 ， 实 例 中 成 功 地 实现 了 浮动 框架 窗口 的 链接 。 
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10-22 ”浮动 框架 窗口 的 主页 面 


图 10-23 链接 content-3.html 文件 的 效果 
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CSS 样式 表 


CSS 简介 

CSS 的 使 用 

和 设置 CSS 的 字体 属性 
颜色 及 背景 属性 
文本 属性 

这 距 与 填充 属性 

这 和 框 属性 

定 伍 及 尺寸 属性 
列表 属性 

先 标 属性 一 一 CUrSOr 
滤 镜 属性 


随 着 网 页 设计 技术 的 发 展 , 人 们 已 经 渐渐 不 满足 于 原 有 的 一 些 HTML 标记 ， 
而 是 希望 能 够 为 页 面 内 容 添加 一 些 更 加 绚丽 的 属性 ,例如 鼠标 标记 、 滤 镜 以 及 淅 
变 效 果 等 。C99 技术 的 飞速 发 展 使 这 些 需 求 成 为 现实 ， 可 以 对 图 片 、 文 本 容器 和 
其 他 一 些 对 象 使 用 CS5 技术 ， 而且 不 用 编写 一 行 令 人 费解 的 代码 。 本 章 将 详细 
讲解 网 页 设计 中 C55 的 功能 和 编写 方法 。 


ss 
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11.1 CSS 简介 


11.1.1 CSS 的 概念 


CSS 是 Cascading Style Sheet 的 缩写 , 可 以 翻译 为 “ 层 合 样式 表 ” 或 “级 联 样 式 表 ”，, 即 “ 样 式 表 ”。 
CSS 的 属性 在 HTML 元 素 中 是 依次 出 现 的 ， 并 不 显示 在 浏览 器 中 。 它 可 以 定义 在 HTML 文档 的 标记 
(tag) 里 ， 也 可 以 在 外 部 附加 文档 中 作为 外 加 文件 。 此 时 ， 一 个 样式 表 可 以 作用 多 个 页 面 ， 乃 至 整个 


站 点 ， 


因此 具有 更 好 的 易 用 性 和 扩展 性 。 


利用 CSS 不 仅 可 以 控制 一 篇 文档 中 的 文本 格式 ,而 且 可 以 控制 多 篇 文档 的 文本 格式 。 因 此 使 用 CSS 
样式 表 定 义 页 面 文字 ， 将 会 使 工作 量 大 大 减 小 。 一 些 好 的 CSS 样式 表 的 建立 ， 可 以 更 进一步 地 对 页 面 
进行 美化 ， 对 文本 格式 进行 精确 定制 。Dreamweaver 还 能 识别 现存 文档 中 已 定义 的 CSS 样式 ， 方便 用 
户 对 现 有 文档 进行 修改 。 

CSS 样式 表 的 功能 一 般 可 以 归纳 为 以 下 儿 点 


OOOOO 


口 


灵活 控制 网 页 中 文字 的 字体 、 颜 色 、 大 小 、 间 距 、 风 格 及 位 置 。 

随意 设置 一 个 文本 块 的 行 高 、 缩 进 ， 并 可 以 为 其 加 入 三 维 效果 的 边框。 

更 方便 地 为 网 页 中 的 任何 元 素 设置 不 同 的 背景 颜色 和 背景 图 片 。 

精确 控制 网 页 中 各 元 素 的 位 置 。 

可 为 网 页 中 的 元 素 设 置 各 种 过 滤器 ， 从 而 产生 诸如 阴影 、 辉 光 、 模 糊 和 透明 等 效果 ， 而 这 些 
效果 只 有 在 一 些 图 像 处 理 软件 中 才能 实现 。 

可 以 与 脚本 语言 相 结合 ， 使 网 页 中 的 元 素 产生 各 种 动态 效果 。 


11.1.2 CSS 的 特点 


除了 可 扩展 HTML 的 样式 设 定 外 ，CSS 的 特点 主要 还 包含 如 下 几 点 : 


口 


司 | 


口 


减少 图 形 文件 的 使 用 : 很 多 网 页 为 求 设计 效果 而 大 量 使 用 图 形 ， 以 致 网 页 的 下 载 速度 变 得 很 
慢 。CSS 提 供 了 很 多 的 文字 样式 、 滤 镜 特效 等 ， 可 以 轻松 取代 原来 图 形 才能 表现 的 视觉 效果 。 
这 样 的 设计 方式 不 仅 使 修改 网 页 内 容 变 得 更 方便 ， 也 大 大 提高 了 下 载 速度 。 

集中 管理 样式 信息 : CSS 可 将 网 页 要 展示 的 内 容 与 样式 设 定 分 开 ， 也 就 是 将 网 页 的 外 观 设 定 
信息 从 网 页 内 容 独 立 出 来 ， 并 集中 管理 。 这 样 ， 当 要 改变 网 页 外 观 时 ， 只 需 更 改 样式 设 定 的 
部 分 ，HTML 文 件 本 身 并 不 需要 更 改 。 

共享 样式 设 定 : 将 CSS 样 式 信息 存 成 独立 的 文件 ， 可 以 让 多 个 网 页 文件 共同 使 用 ， 从 而 避免 
在 每 一 个 网 页 文件 中 都 要 重复 设 定 的 麻烦 。 

将 样式 分 类 使 用 : 多 个 HTML 文 件 可 使 用 同一 个 CSS 样 式 文件 ， 一 个 HTML 网 页 文件 上 也 可 以 
同时 使 用 多 个 CSS 样 式 文件 。 


在 同一 文本 中 应 用 两 种 或 两 种 以 上 的 样式 时 ， 这 些 样式 会 相互 冲突 ， 产 生 不 可 预料 的 效果 。 浏 览 
器 根据 以 下 规则 显示 样式 属性 : 
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如 果 在 同一 文本 中 应 用 两 种 样式 时 ， 浏 览 器 显示 出 两 种 样式 中 除 冲突 属性 之 外 的 所 有 属性 。 
如 果 在 同一 文本 中 应 用 的 两 种 样式 是 相互 冲突 的 ， 浏 览 器 显示 出 最 里 面 的 样式 属性 。 

如 果 存 在 直接 冲突 ， 自 定义 样式 的 属性 〈 应 用 CLASS 属性 的 样式 ) 将 覆盖 HTML 标 记 样式 的 
属性 。 


DO DO 


11.2 CSS 的 使 用 


11.2.1 CSS 的 基本 语法 


CSS 的 基本 语法 : 选择 符 { 样式 属性 : 取 值 ; 样式 属性 : 取 值 ;…} 

其 中 ， 选 择 符 可 以 是 多 种 形式 的 ， 例 如 要 定义 HTML 标记 中 body 的 样式 ， 可 以 使 用 如 下 的 代码 : 

body {color: black} 

这 段 代 码 定 义 了 页 面 主体 部 分 ( 即 HTML 中 <body> 标 记 中 的 内 容 ) 的 样式 ，color 表示 主体 部 分 文 
字 的 颜色 属性 ，black 是 颜色 的 属性 值 。 因 此 这 段 样式 代码 实现 的 功能 是 将 页 面 中 的 文字 显示 为 黑色 。 

CSS 样式 中 的 选择 符 可 以 有 如 下 几 种 : 

1， 类 选择 符 

用 类 选择 符 可 以 把 相同 的 元 素 分 类 定义 成 不 同 的 样式 。 定 义 类 选择 符 时 ， 在 自 定 类 名 称 的 前 面 加 
一 个 句点 〈.) 。 

类 选择 符 的 语法 : 标记 名 .类 名 { 样式 属性 : 取 值 ; 样式 属性 : 取 值 ;…} 

例如 要 设置 两 个 文字 颜色 不 同 的 段落 ， 一 个 为 红色 ， 一 个 为 黑色 ,可 以 使 用 如 下 代码 预定 义 两 个 类 : 

p.red { color: red } 

p.black { color: black } 

在 这 段 代码 中 ,定义 了 段落 选择 符 p 的 red 和 black 两 个 类 ，red 和 black 就 可 以 称 为 类 选择 符 。 类 
的 名 称 可 以 是 任意 英文 单词 或 以 英文 开头 与 数字 的 组 合 ， 一 般 以 其 功能 和 效果 简要 命名 。 值 得 注意 的 
是 ， 类 选择 符 在 实际 应 用 中 ， 可 以 省 略 HTML 标记 名 ， 也 就 是 实例 中 的 p， 直 接 写 成 下 面 的 代码 : 

.Ted { color: red } 

.black { color: black } 

但 是 与 直接 定义 HTML 中 的 标记 样式 不 同 的 是 : 这 段 代 码 仅仅 是 定义 了 样式 ， 并 没有 应 用 样式 。 
如 果 要 应 用 样式 中 的 red 类 ， 还 需要 在 正文 中 添加 如 下 代码 : 

<p class=red> 

同样 ， 如 果 在 页 面 中 要 应 用 black 类 的 样式 ， 需 要 在 其 中 添加 如 下 代码 : 

<p class=black> 

2. ID 选择 符 

在 HTML/XML 文档 中 ， 在 需要 惟一 标识 一 个 元 素 时 ， 就 会 赋予 它 一 个 id 标识 ， 以 便 在 对 整个 文 
档 进行 处 理 时 能 够 很 快 地 找到 这 个 元 素 。 而 ID 选择 符 则 用 来 对 这 个 单一 元 素 定义 单独 的 样式 。 其 定义 
的 方法 与 类 选择 符 大 同 小 异 ， 只 需要 把 句点 〈.) 改 成 井 号 (#) ， 而 在 调用 类 时 需要 把 class 换 成 id。 
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ID 选择 符 的 语法 : 标记 名 # 标 识 名 { 样式 属性 : 取 值 ; 样式 属性 : 取 值 ;…} 

例如 在 页 面 中 定义 了 一 个 id 为 exam 的 元 素 ， 这 里 要 设置 这 一 元 素 的 文字 颜色 为 红色 ， 那 么 只 需 
要 添加 如 下 代码 : 

#exam { color#FF0000 } 

<p id="exam"> 

这 样 ， 页 面 中 包含 id 为 exam 的 元 素 的 段落 文字 显示 为 红色 。 但 是 由 于 ID 选择 符 局 限 性 很 大 ， 只 
能 单独 定义 某 个 元 素 的 样式 ， 一 般 只 在 特殊 情况 下 使 用 。 

3. 包含 选择 符 

包含 选择 符 也 称 为 关联 选择 符 ， 是 对 某 种 元 素 包含 关系 〈 例 如 对 元 素 1 里 包含 元 素 2) 定义 的 样式 
表 。 这 种 方式 只 对 在 元 素 1 里 的 元 素 2 定义 ， 对 单独 的 元 素 1 或 元 素 2 无 定义 ， 例 如 : 

table a { font-size: 12px } 

这 段 代码 只 对 在 表格 内 的 链接 文字 有 效 ， 设 定 了 文字 大 小 为 12 像素 ， 而 对 于 表格 外 的 链接 文字 则 
不 起 作用 。 


11.2.2 添加 CSS 的 方法 


当 浏 览 器 读 取 样式 表 时 ， 要 依照 文本 格式 来 读 ， 这 里 介绍 4 种 在 页 面 中 插入 样式 表 的 方法 : 链 入 
外 部 样式 表 、 内 部 样式 表 、 导 入 外 部 样式 表 和 内 网 样式 。 

1， 链 入 外 部 样式 表 

链 入 外 部 样式 表 是 把 样式 表单 独 保存 为 一 个 文件 ， 然 后 在 页 面 中 用 <link> 标 记 链接 ， 而 这 个 <link> 
标记 必须 放 到 页 面 的 <head> 区 域内 。 

基本 语法 : 

<link rel="stylesheet" type="text/css" hre 伟 "样式 表 文 件 的 地 址 "> 

在 该 语法 中 ， 浏 览 器 从 样式 表 文 件 中 以 文档 格式 读 出 定义 的 样式 表 。rel="stylesheet" 是 指 在 页 面 中 
使 用 的 是 外 部 样式 表 ; type="text/css" 是 指 文件 的 类 型 是 样式 表 文本 ; href 参数 则 用 来 设 定 文件 的 地 址 ， 
可 以 为 绝对 地 址 或 相对 地 址 。 

一 个 外 部 样式 表 文 件 可 以 应 用 于 多 个 页 面 。 当 改变 这 个 样式 表 文 件 时 ， 所 有 页 面 的 样式 都 随 之 改 
变 。 因 此 常 应 用 在 制作 大 量 相同 样式 页 面 的 网 站 中 ， 因 为 它 不 仅 减 少 了 重复 的 工作 量 ， 而 且 有 利于 以 
后 的 修改 、 编 辑 ， 浏 览 时 也 减少 了 重复 下 载 代码 。 

样式 表 文 件 可 以 用 任何 文本 编辑 器 (例如 “记事 本 ”) 打开 并 编辑 ， 一般 样式 表 文 件 扩展 名 为 .css， 
其 内 容 就 是 定义 的 样式 ， 不 包含 HTML 标记 ， 例 如: 

hr {color: #0000FF} 

p {color:black; font-family: "宋体 "} 

在 这 段 代码 中 定义 了 水 平 线 的 颜色 为 蓝 色 ， 段 落 文字 的 颜色 为 黑色 ， 字 体 为 宋体 。 

2. 内 部 样式 表 

内 部 样式 表 是 把 样式 表 的 内 容 直 接 放 到 页 面 的 <head> 区 域 里 ， 通 过 <style> 标 记 插入 。 
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基本 语法 : 
<style type="text/css"> 
选择 符 { 样式 属性 : 取 值 ; 样式 属性 : 取 值 ;…} 
选择 符 { 样式 属性 : 取 值 ; 样式 属性 : 取 值 ;…} 


</style> 

说 明 : 在 语法 中 ， 关 于 样式 的 具体 定义 给 出 了 这 种 基本 的 语法 ， 也 可 以 是 前 面 所 说 的 其 他 几 种 ， 
例如 类 选择 器 写法 等 。 

由 于 有 些 低 版 本 的 浏览 器 不 能 识别 style 标记 ， 这 意味 着 低 版 本 的 浏览 器 在 读 取 文 件 时 会 忽略 
<style> 标 记 ， 而 把 标记 中 的 内 容 〈 也 就 是 样式 的 定义 文字 ) 以 文本 的 形式 直接 显示 到 页 面 上 。 为 了 避 
免 这 样 的 情况 发 生 , 考虑 到 HTML 和 CSS 文件 的 注释 方法 不 同 , 因此 使 用 HTML 语言 的 注释 语句 (<!-- 
注释 -->) 隐藏 样式 表 的 定义 内 容 。 因 此 实际 应 用 时 ， 内 部 样式 表 的 语法 往往 写作 : 

<style type="text/css"> 

ed -- 
选择 符 { 样式 属性 : 取 值 ; 样式 属性 : 取 值 ;…} 
选择 符 { 样式 属性 : 取 值 ; 样式 属性 : 取 值 ;…} 


</style> 


外 注意 : 在 本 章 后 面 关于 设置 CSS 各 种 属性 的 讲解 中 ， 为 了 简单 明了 ， 均 采用 内 部 样式 表 的 方法 来 讲 
解 。 这样，CSS 样式 的 定义 就 与 HTML 的 内 容 放 置 在 同一 个 页 面 中 了 。 而 在 实际 应 用 中 ， 为 
了 充分 利用 CSS 样式 表 的 优点 ， 还 是 推荐 使 用 “ 链 入 外 部 样式 表 ” 或 者 下 面 即将 讲解 的 “ 导 
入 外 部 样式 表 ” 的 方法 来 进行 设置 。 
3， 导 入 外 部 样式 表 
导入 外 部 样式 表 是 指 在 内 部 样式 表 的 <style> 区 域 里 引用 一 个 外 部 的 样式 表 文件 ， 导 入 时 需要 使 用 
@import 声明 。 
基本 语法 : 
<style type="text/css"> 
@import url( 样 式 表 的 地 址 ) 
选择 符 { 样式 属性 : 取 值 ; 样式 属性 : 取 值 ;…} 
选择 符 { 样式 属性 : 取 值 ; 样式 属性 : 取 值 ;…} 
</style> 
与 引用 其 他 文件 相同 ， 这 里 的 样式 表 地 址 可 以 是 绝对 地 址 ， 也 可 以 是 相对 地 址 。 在 使 用 中 ， 需 要 
注意 的 是 导入 外 部 样式 表 ， 也 就 是 @import 声明 必须 在 样式 表 定 义 的 开始 部 分 ， 而 其 他 样式 表 的 定义 
都 要 在 @import 声明 之 后 。 
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4. 内 婴 样 式 

内 嵌 样 式 是 混合 在 HTML 标记 里 使 用 的 ， 用 这 种 方法 可 以 很 直观 地 对 某 个 元 素 直接 定义 样式 。 内 
峰 样 式 的 使 用 是 直接 在 HTML 标记 里 加 入 <style> 参 数 , 在 <style> 参 数 的 内 容 就 是 CSS 的 属性 和 属性 值 。 

基本 语法 : 

<HTML 标记 style=" 样 式 属性 : 取 值 ; 样式 属性 : 取 值 ;…"> 

在 这 里 ，HTML 标记 就 是 页 面 中 标识 HTML 元 素 的 标记 ， 例 如 body、p 等 。 由 语法 可 以 很 明显 地 
看 出 : style 参数 后 面 的 引号 里 的 内 容 就 相当 于 样式 表 大 括号 里 的 内 容 。 需 要 指出 的 是 ，style 参数 可 以 
应 用 于 HTML 文件 中 body 标记 内 除了 basefont、param 和 script 之 外 的 任意 元 素 (包括 body 本 身 ) 。 


11.2.3 ”CSS 的 继承 


CSS 的 继承 性 ， 也 被 称 为 样式 表 的 层 登 性 。 样 式 表 的 继承 规则 是 外 部 的 元 素 样式 会 保留 下 来 继承 给 
这 个 元 素 所 包含 的 其 他 元 素 。 事 实 上 ， 所 有 在 元 素 中 媒 套 的 元 素 都 会 继承 外 层 元 素 指定 的 属性 值 ， 有 时 
会 把 很 多 层 嵌 套 的 样式 全 加 在 一 起 ， 除 非 另外 更 改 。 例 如 ， 在 页 面 的 开始 定义 了 样式 表 的 内 容 如 下 ， 

body { color: red; font-size:9pt} 

而 在 页 面 的 主体 部 分 有 如 下 的 代码 : 


</body> 

在 这 个 实例 中 ，p 元 素 包含 在 元 素 body 中 ， 因 此 标记 <p> 中 的 内 容 会 继承 body 定义 的 属性 ， 也 就 
是 实例 中 的 段落 文字 同样 会 以 红色 的 9 像素 大 小 的 文字 显示 。 

但 是 在 有 些 特殊 的 情况 下 ， 内 部 选择 符 不 继承 包含 它 的 选择 符 的 属性 值 。 例 如 ， 上 边界 属性 值 是 
不 会 继承 的 ， 因 为 一 般 情况 认为 段落 不 会 同文 档 的 body 有 同样 的 上 边界 值 。 


11.2.4 CSS 样式 的 冲突 


如 果 在 同一 个 选择 器 上 使 用 几 个 不 同 的 样式 表 时 ， 这 个 属性 值 将 会 登 加 几 个 样式 表 ， 遇 到 冲突 的 
地 方 会 以 最 后 定义 的 为 准 。 例 如 在 11.2.3 节 的 实例 中 ， 如 果 同 时 定义 了 p 的 颜色 ， 也 就 是 样式 表 的 内 
容 更 改 为 : 

body { color: red; font-size:9pt} 


p {color:blue} 

那么 在 页 面 显示 时 ， 段 落 文字 的 字号 会 继承 body 的 9 像素 ， 而 颜色 则 按照 最 后 定义 的 蓝 色 显示 。 

不 同 的 选择 符 定义 相同 的 元 素 时 ， 要 考虑 到 不 同 的 选择 符 之 间 的 优先 级 。ID 选择 符 、 类 选择 符 和 
HTML 标记 选择 符 ， 因 为 ID 选择 符 是 最 后 加 到 元 素 上 的 ， 所 以 优先 级 最 高 ， 其 次 是 类 选择 符 。 例 如 : 

p {color: 黑色 } 
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-blue { color: 蓝 色 } 

##d1 { color: 红色 } 

如 果 对 页 面 中 的 一 个 段落 同时 设置 这 3 种 样式 , 那么 会 按照 优先 权 最 高 的 ID 选择 符 显示 为 红色 的 
文字 。 

依照 后 定义 的 优先 这 一 原则 ， 一 般 认 为 优先 级 最 高 的 是 内 嵌 样 式 ， 内 部 样式 表 高 于 导入 外 部 样式 
表 ， 链 入 外 部 样式 表 和 内 部 样式 表 之 间 则 根据 定义 的 先后 顺序 来 评定 ， 也 就 是 最 后 定义 的 优先 级 高 。 


11.2.5 书写 CSS 的 注意 事项 


一 般 情况 下 ， 在 书写 CSS 样式 表 时 ， 需 要 注意 以 下 原则 : 
(1) 如 果 属 性 的 值 是 多 个 单词 组 成 ， 则 必须 使 用 引号 〈"") 将 属性 值 括 起 来 。 
(2) 如 果 要 对 一 个 选择 符 指定 多 个 属性 ， 则 需要 使 用 分 号 〈;) 将 所 有 的 属性 和 值 分 开 。 
(3) 可 以 将 具有 相同 属性 和 属性 值 的 选择 符 组 合 起 来 ， 用 逗号 (,) 将 其 分 开 ， 这 样 可 以 减少 样式 
的 重复 定义 。 例 如 ， 要 定义 段落 和 表格 内 的 文字 尺寸 为 9 像素 ， 则 可 以 使 用 下 面 这 段 代 码 : 
p, table{ font-size: 9pt } 
而 这 段 代码 的 效果 完全 等 效 于 对 这 两 个 选择 符 分 别 定义 : 
p {font-size: 9pt } 
table { font-size: 9pt } 
(4) CSS 样式 表 中 的 注释 语句 以 ，“/*” 开头 ， 以 “*/” 结尾 ， 如 下 所 示 : 
谨 定义 段落 的 样式 表 */ 


p 
color: black; font-family: arial /* 颜色 为 黑色 ， 字 体 为 arial */ 
} 


11.3 设置 CSS 的 字体 属性 


从 本 节 开 始 ， 将 系统 地 介绍 CSS 的 各 种 属性 ， 因 为 对 页 面 产生 影响 的 最 终 手 段 还 是 使 用 属性 。 因 
此 ， 熟 练 掌握 CSS 的 每 一 个 属性 及 各 个 属性 值 是 十 分 必要 的 。 
CSS 的 字体 属性 主要 包括 字体 族 科 、 字 体 大 小 、 字 体 风 格 、 加 粗 字体 以 及 英文 字体 的 大 小 写 转换 。 


11.3.1 设置 字体 一 一 font-family 


字体 族 科 实际 上 就 是 在 CSS 中 设置 文字 的 字体 ,用 于 改变 HTML 标志 或 元 素 的 字体 ,相当 于 HTML 
标记 中 font-face 属性 的 功能 。 

语法 : font-family: "字体 1"," 字 体 2",… 

说 明 : 如 果 在 font-family 属性 中 定义 了 不 只 一 个 字体 ， 那 么 浏览 器 会 由 前 向 后 选用 字体 。 也 就 是 
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说 ， 当 浏览 器 不 支持 第 一 个 字体 时 ， 会 采用 第 二 个 字体 ; 如 果 前 两 个 字体 都 不 支持 ， 则 采用 第 三 个 字 
体 ， 以 此 类 推 。 如 果 浏 览 器 不 支持 定义 的 所 有 字体 ， 则 会 采用 系统 的 默认 字体 。 同 时 需要 注意 的 是 ， 
必须 用 双 引 号 引 住 任何 包含 空格 的 字体 名 。 
实例 代码 : 
<html> 
<head> 
<title> 设 置 字体 </title> 
<style> 
<I-- 
h2 {font-family: "华文 彩云 "," 黑 体 "} 
.text { font-family: "宋体 "} 


一 > 
</style> 
</head> 
<body> 

<h2> 庐 山 美 景 一 一 小 天 池 </h2> 

<p class=text>&nbsp;&nbsp;&nbsp;&nbsp; 小 天 池 位 于 庐山 特 岭 北面 ， 池 中 之 水 置 于 高 山 而 终年 不 溢 不 润 。 
池 后 山 背 上 ， 屹 立 着 一 座 白 塔 似 的 喇嘛 塔 。 塔 建 于 1936 年 。 小 天 池 山 对 面 还 有 一 怪 石 ， 远 望 似 一 雄 座 伸 颈 和 欲 鸣 。 
应 首 有 巨石 吞 就 ， 一 石 伸 出 应 嘴 崖 ， 石 缝 中 绿 树 芳 草 婆 姿 似 羽 毛 ， 名 忠 鹰 嘴 。 山 南 翘 有 一 峰 凌 空 突 出 ， 下 临 深 屯 。 
峰 项 悬崖 上 有 一 伞 项 圆 豪 。 步 入 亭 中 ， 长 江 似 一 条 和 白色 缴 带 ， 蒜 忽 在 天 际 。 山 脚 是 深谷 ， 形 如 一 把 打开 的 剪刀 ， 


名 剪刀 峡 。 峡 中 溪流 演 演 ， 怪 石 上 几 ， 幽 雅 秀美 。 小 天 池 是 特 岭 观 日 出 、 晚 霞 、 云 海 等 奇观 最 佳 的 地 方 之 一 。 登 
临 山顶 ， 好 似 坐 上 一 架 直 升 飞 机 ， 盘 桓 在 庐山 的 上 空 ， 青 山 契 水 ， 红 瓦 苍 崖 ， 历 历 在 目 ， 令 人 纵横 浮想 ， 思 绪 万 
<p> 
</body> 
</html> 


运行 代码 ， 可 以 看 到 页 面 中 应 用 了 在 <style> 标 记 中 设 定 的 字体 ， 其 中 <h2> 标 记 中 的 文字 以 定义 的 
华文 彩云 显示 ， 段 落 中 的 文字 则 以 text 类 中 定义 的 宋体 显示 ， 如 图 11-1 所 示 。 当 浏览 器 不 支持 华文 彩 
云 字体 时 ，<h2> 标 记 中 的 文字 则 会 以 黑体 显示 。 
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图 11-1 给 页 面 文字 指定 字体 
11.3.2 ”设置 字号 一 一 font-size 


字体 大 小 属性 用 作 修改 字体 显示 的 大 小 。 
语法 : font-size: 大 小 取 值 
取 值 范围 : 
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口 绝对 大 小 : xx-small | x-small | small | medium | large | x-large | xx-large。 

口 相对 大 小 : larger| smaller。 

口 长度 值 或 百分比 。 

说 明 : 绝对 大 小 根据 对 象 字体 进行 调节 ， 包 括 xx-small | x-small | small | medium | large | x-large | 
xx-large。 相 对 大 小 则 是 相对 于 父 对 象 中 字体 尺寸 进行 相对 调节 ， 它 使 用 成 比例 的 em 单位 计算 ， 可 设 
置 为 larger 或 smaller。 长 度 则 是 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 使 用 的 单位 可 以 为 Pt (点 ，1 
点 =1/72 英寸 ) 、px (像素) 、in (英寸 ) 等 ， 其 中 浮 点 数字 不 能 为 负 值 。 百 分 比 取 值 基于 父 对 象 中 字 
体 的 尺寸 。 

实例 代码 : 


<html> 
<head> 
<title> 设 置 字体 </title> 
<style> 
汉王 

h2 {font-family: "华文 彩云 "" 黑 体 "; font-size:12pt} 

.text{ font-family: "宋体 "; font-size:12px} 
一 > 
</style> 
</head> 
<body> 

<h2> 庐 山 美 景 一 一 小 天 池 </h2> 

<p class=text>&nbspi&nbsp;&nbsp;&nbsp; 小 天 池 位 于 庐山 特 岭 北面 ， 池 中 之 水 置 于 高 山 而 终年 不 溢 不 酒 。 
池 后 山 状 上 ， 履 立 着 一 座 白 塔 似 的 喇嘛 塔 。 塔 建 于 1936 年 。 小 天 池 山 对 面 还 有 一 怪 石 ， 远 望 似 一 雄 座 伸 颈 欲 鸣 。 
应 首 有 巨石 全 就 ， 一 石 伸 出 鹰 嘴 岸 ， 石 缝 中 绿 树 芳 草 婆婆 似 羽毛 ， 名 吏 座 嘴 。 山 南 匡 有 一 峰 凌 空 突出 ， 下 临 深 超 。 
峰 项 悬崖 上 有 一 伞 项 圆 豪 。 步 入 亭 中 ， 长 江 似 一 条 和 白色 织带 ， 蒜 忽 在 天 际 。 山 脚 是 深谷 ， 形 如 一 把 打开 的 剪刀 ， 
名 剪刀 峡 。 峡 中 溪流 演 深 ， 怪 石 岂 网 ， 幽 雅 秀 美 。 小 天 池 是 特 岭 观 日 出 、 晚 霞 、 云 海 等 奇观 最 佳 的 地 方 之 一 。 登 
临 山顶 ， 好 似 坐 上 一 架 直 升 飞机 ， 盘 桓 在 庐山 的 上 空 ， 青 山 契 水 ， 红 瓦 苍 岸 ， 历 历 在 目 ， 令 人 纵横 浮想 ， 思 绪 万 
千 。</p> 
</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 <h2> 标 记 中 的 文字 字号 被 设 定 为 12pt， 即 12 点 ; 而 段落 中 的 文字 则 显示 
为 12px， 即 12 像素 ， 如 图 11-2 所 示 。 从 图 中 很 明显 可 以 看 出 12pt 和 12px 的 大 小 相差 很 多 。 


ei- 


SE | | = .3 
图 11-2 设置 字号 
在 设置 字号 时 ， 还 可 以 同时 设置 文字 的 行 高 ， 其 取 值 方法 和 单位 与 设置 字号 相同 ， 如 设置 带 行 高 
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的 字号 可 以 是 font-size:12pt/14pt， 这 就 表示 设置 的 文字 是 12 点 大 小 ， 行 高 是 14 点 。 
11.3.3 字体 风格 一 一 font-style 


字体 风格 就 是 字体 样式 ， 主 要 是 设置 字体 是 否 为 斜体 。 

语法 : font-style: 样 式 的 取 值 

样式 的 取 值 范围 ，normal | italic | oblique 

说 明 : normal 是 以 正常 的 方式 显示 ; italic 则 是 以 斜体 显示 文字 ; oblique 属于 其 中 间 状 态 ， 以 偏 斜 
体 显 示 。 

实例 代码 : 


<html> 
<head> 
<title> 设 置 字体 </title> 
<style> 
<I-- 

h2 { font-family: "华文 彩云 "" 黑 体 "; font-size:12pt; font-style:italic} 

.text{ font-family: "宋体 "; font-size:12px; font-style:oblique} 
一 > 
</style> 
</head> 
<body> 

<h2> 庐 山 美 景 一 一 小 天 池 </h2> 

<p class=text>&nbspi&nbsp;&nbsp;&nbsp; 小 天 池 位 于 庐山 特 岭 北面 ， 池 中 之 水 置 于 高 山 而 终年 不 溢 不 酒 。 
池 后 山 背 上 ， 屹 立 着 一 座 白 塔 似 的 喇嘛 塔 。 塔 建 于 1936 年 。 小 天 池 山 对 面 还 有 一 怪 石 ， 远 望 似 一 雄 座 伸 颈 欲 鸣 。 
应 首 有 巨石 登 就 ， 一 石 伸 出 鹰 嘴 岸 ， 石 缝 中 绿 树 芳 草 婆婆 似 羽毛 ， 名 吏 鹰 嘴 。 山 南 区 有 一 峰 凌 空 突出 ， 下 临 深 地 。 
峰 项 悬崖 上 有 一 伞 项 圆 亭 。 步 入 亭 中 ， 长 江 似 一 条 白色 织带 ， 蒜 忽 在 天 际 。 山 脚 是 深谷 ， 形 如 一 把 打开 的 剪刀 ， 
名 剪刀 峡 。 峡 中 溪流 演 演 ， 怪 石 旺 几 ， 幽 雅 秀美 。 小 天 池 是 特 岭 观 日 出 、 晚 霞 、 云 海 等 奇观 最 佳 的 地 方 之 一 。 登 
临 山顶 ， 好 似 坐 上 一 架 直 升 飞 机 ， 盘 桓 在 庐山 的 上 空 ， 青 山 自 水 ， 红 瓦 苍 崖 ， 历 历 在 目 ， 令 人 纵横 浮想 ， 思 绪 万 
千 。</p> 
</body> 
</html> 


运行 这 段 代码 , 可 以 看 到 <h2> 标 记 中 的 文字 以 斜体 的 方式 显示 ; 而 段落 中 的 文字 则 以 偏 斜体 显示 ， 
效果 如 图 11-3 所 示 。 
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11-3 ”设置 文字 的 样式 
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11.3.4 设置 加 粗 字体 一 一 font-weight 


font-weight 属性 用 于 设置 字体 的 粗细 ， 实 现 对 一 些 字 体 的 加 粗 显 示 。 

语法 : font-weight: 字体 粗 度 值 

取 值 范围 : normal | bold | bolder | lighter | number 

说 明 : font-weight 的 取 值 可 以 是 其 中 的 任何 一 种 。 其 中 normal 表示 正常 粗细 ; bold 表示 粗 体 , bolder 
则 表示 特 粗 体 ， 就 是 在 粗 体 的 基础 上 再 加 粗 ，lighter 表示 特 细 体 ， 就 是 比 正常 字体 还 要 细 ; number 不 
是 真正 的 取 值 ， 它 表示 font-weight 还 可 以 取 数 值 ， 其 范围 是 100~900， 而 且 一 般 情况 下 都 是 整 百 的 数 
字 ， 如 100、200 等 。 正 常 字体 相当 于 取 数 值 400 的 粗细 ; 粗 体 则 相当 于 700 的 粗细 。 

实例 代码 : 


<!-- 设 置 字体 的 粗细 一 > 
<html> 
<head> 
<title> 设 置 字体 </title> 
<style> 
se 

h2 {font-family: "黑体 "; font-size:12pt; font-weight:bolder} 

.text { font-family: "宋体 "; font-size:12px; font-weight:200} 
一 > 
</style> 
</head> 
<body> 

<h2> 庐 山 美 景 一 一 小 天 池 </h2> 

<p class=text>&nbsp;&nbsp;&nbsp;&nbsp; 小 天 池 位 于 庐山 特 岭 北面 ， 池 中 之 水 置 于 高 山 而 终年 不 溢 不 酒 。 
池 后 山 养 上， 屹立 着 一 座 白 塔 似 的 喇嘛 塔 。 塔 建 于 1936 年 。 小 天 池 山 对 面 还 有 一 怪 石 ， 远 望 似 一 友 座 伸 颈 欲 鸣 。 
应 首 有 巨石 释 就 ， 一 石 伸 出 应 嘴 崖 ， 石 缝 中 绿 树 芳 草 婆 姿 似 羽 毛 ， 名 吏 座 嘴 。 山 南 划 有 一 峰 凌 空 突 出 ， 下 临 深 屯 。 
峰 项 悬崖 上 有 一 伞 项 圆 豪 。 步 入 亭 中 ， 长 江 似 一 条 白色 织带 ， 蒜 忽 在 天 际 。 山 脚 是 深谷 ， 形 如 一 把 打开 的 剪刀 ， 
名 剪刀 峡 。 峡 中 溪流 演 尝 ， 怪 石 旺 几 ， 幽 雅 秀美 。 小 天 池 是 特 岭 观 日 出 、 晚 霞 、 云 海 等 奇观 最 佳 的 地 方 之 一 。 登 
临 山顶 ， 好 似 坐 上 一 架 直 升 飞机 ， 盘 桓 在 庐山 的 上 空 ， 青 山 兢 水 ， 红 瓦 苍 崖 ， 历 历 在 目 ， 令 人 纵横 浮想 ， 思 绪 万 
千 。</p> 
</body> 
</html> 


运行 程序 ， 可 以 看 到 效果 如 图 11-4 所 示 。 其 中 <h2> 标 记 中 的 文字 采用 了 特 粗 字体 ， 相 当 于 900 的 
粗细 ; 在 段落 文字 中 采用 了 200 的 粗细 ， 比 正常 字体 还 要 细 一 些 。 
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各 注意 : 因为 不 是 所 有 的 字体 都 有 100 ~ 900 这 样 9 个 有 效 的 加 粗 显 示 , 因此 一 些 字体 的 粗细 在 某 些 时 
候 会 被 替代 。 例 如 ， 当 设置 了 font-weight 的 取 值 为 S00， 而 该 字体 没有 500 这 一 个 档次 的 粗 
细 ， 那 么 它 就 会 以 400 的 粗细 显示 。 


11.3.5 ”小 型 的 大 写字 母 一 一 font-variant 


font-variant 属性 用 来 设置 英文 字体 是 否 显示 为 小 型 的 大 写字 母 。 

语法 :font-variant : 取 值 

取 值 范围 : normal | small-caps 

说 明 : normal 表示 正常 的 字体 ，small-caps 表示 英文 显示 为 小 型 的 大 写字 母 字 体 。 
实例 代码 : 


<html> 
<head> 
<title> 设 置 小 型 的 大 写字 母 </title> 
<style> 
<|-- 
h2 {font-family: "黑体 "; font-size:18pt; font-weight:bolder; font-variant: small-caps } 
.text { font-family: "Times New Roman"; font-size:14pt; font-variant: normal} 
.newtext { font-family: "Times New Roman"; font-size:14pt; font-variant: small-caps} 
一 > 
</style> 
</head> 
<body> 
<h2> contrast </h2> 
<p class=text>The craftsman, Arnold, came from a family of carpenters. </p> 
<p class=newtext>The craftsman, Amold, came from a family of carpenters. </p> 
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图 11-5 设置 小 型 大 写字 母 


11.3.6 ”复合 属性 : 字体 一 一 font 


font 属性 是 复合 属性 ， 用 作对 不 同 字体 属性 的 略 写 ， 特 别 是 行 高 。 
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语法 : font: 字 体 取 值 

说 明 : 在 这 里 ， 字 体 取 值 可 以 包含 字体 族 科 、 字 体 大 小 、 字 体 风 格 、 加 粗 字体 、 小 型 大 写字 母 ， 
之 间 用 空格 相连 。 例 如 可 以 设置 为 p { font: italic small-caps bold 12pt/18pt 宋体 ; }， 表 示 设 置 的 段落 文 
字 是 粗 体 和 和 斜体 的 宋体 ， 大 小 是 12 点 、 行 高 是 18 点 ， 文 字 中 的 英文 采用 小 型 的 大 写字 母 。 

实例 代码 : 


< 上 -使 用 font 属性 设置 字体 -> 
<html> 
<head> 
<title> 设 置 字 体 </title> 
<style> 
<!-- 

h2 {font:bolder italic 14pt 黑体 } 

.text {font:200 10pt/14pt 宋体 } 
一 > 
</style> 
</head> 
<body> 

<h2> 庐 山 美 景 一 一 小 天 池 </h2> 

<p class=text>&nbsp;&nbsp;&nbsp;&nbsp; 小 天 池 位 于 庐山 特 岭 北面 ， 池 中 之 水 置 于 高 山 而 终年 不 溢 不 润 。 
池 后 山 背 上 ， 屹 立 着 一 座 白 塔 似 的 喇嘛 塔 。 塔 建 于 1936 年 。 小 天 池 山 对 面 还 有 一 怪 石 ， 远 望 似 一 雄 座 伸 颈 和 欲 鸣 。 
应 首 有 巨石 全 就 ， 一 石 伸 出 鹰 嘴 崖 ， 石 缝 中 绿 树 芳 草 婆 溉 似 羽毛 ， 名 吏 鹰 嘴 。 山 南 藉 有 一 峰 凌空 突出 ， 下 临 深 厄 。 
峰 项 悬崖 上 有 一 伞 项 圆 豪 。 步 入 亭 中 ， 长 江 似 一 条 和 白色 级 带 ， 蒜 忽 在 天 际 。 山 脚 是 深谷 ， 形 如 一 把 打开 的 剪刀 ， 
名 剪刀 峡 。 峡 中 溪流 尝 尝 ， 怪 石 崂 几 ， 幽 雅 秀美 。 小 天 池 是 特 岭 观 日 出 、 晚 霞 、 云 海 等 奇观 最 佳 的 地 方 之 一 。 登 
临 山顶 ， 好 似 坐 上 一 架 直 升 飞机 ， 盘 桓 在 庐山 的 上 空 ， 青 山 自 水 ， 红 瓦 苍 崖 ， 历 历 在 目 ， 令 人 纵横 浮想 ， 思 绪 万 
千 。</p> 
</body> 
</html> 


运行 这 段 代码 ， 效 果 如 图 11-6 所 示 。 
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图 11-6 使 用 font 属性 简略 设置 字体 


11.4 颜色 及 背景 属性 


颜色 和 背景 属性 主要 包括 颜色 属性 设置 、 背 景 颜色 、 背 景 图 像 、 背 景 重复 、 背 景 附件 和 背景 位 置 。 
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11.4.1 颜色 属性 设置 一 一 color 


颜色 属性 允许 网 页 制作 者 指定 一 个 元 素 的 颜色 。 颜色 值 是 一 个 关键 字 或 一 个 RGB 格式 的 数字 。 常 
用 的 预 设 颜色 关键 字 有 16 个， 具体 见 表 11-1。 


表 11-1 常用 的 16 种 颜色 关键 字 


颜色 关键 字 中 文 含义 十 六 进 制 RGB 什 
agua 水 绿色 #00FFFF, 
black, 黑色 #000000 
fuchsia 紫红 色 #FFOOFF 
gra #808080 
green #008000 
lime #00FFO0 
maroon #800000 
nav #000080 
olive #808000 
eg #800080 
red #FFO000 
silver #COCOCO 
teal #008080 
white APFFFFE 
ellow #FFFFO0 


为 了 避免 与 用 户 的 样式 表 之 间 的 冲突 ， 建 议 颜 色 和 背景 属性 始终 一 起 指定 。 

语法 : color: 颜 色 取 值 

说 明 : 在 这 里 颜色 取 值 可 以 是 颜色 关键 字 ， 如 yellow， 也 可 以 是 RGB 颜色 代码 。 在 CSS 中 ，RGB 
颜色 代码 有 多 种 写法 : 

口 #rrggbb: 如 #FF0000。 

口 ”机 gb: 如 #F00。 

口 rgb(x,x,x): 其 中 ，x 是 一 个 介 于 0~255 之 间 的 整数 ， 例 如 rgb(255,0,0)。 

口 rgb(y%,y%,y%): 其 中 ，y 是 一 个 介 于 0.0~100.0 之 间 的 整数 ， 例 如 ，rgb(100%,0%,0%)。 

这 些 颜 色 代 码 都 表示 红色 ， 即 关键 字 为 red 的 颜色 。 

实例 代码 : 


<html> 
<head> 
<title> 设 置 颜色 </title> 
<style> 
<I-- 
h2 {font-family:" 黑 体 "; font-size:15pt; color:red} 
.text { font-family:" 宋 体 "; font-size:10pt; color:#8B0000 } 
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一 > 
</style> 
</head> 
<body> 

<h2> 梅 花 一 一 花 中 君子 </h2> 

<p class=text>&nbsp;&nbsp;&nbsp;&nbsp; 梅花 树 的 枝 干 不 是 很 粗 , 但 长 得 很 独特 。 它 们 很 少 像 其 他 树 的 枝 
干 那样 笔直 地 介 长 开 ， 而 多 是 曲 曲 折 折 、 盘 旋 而 上 。 每 年 大 地 将 要 复苏 时 ， 深 褐色 的 老 枝 上 便 会 抽出 一 些 挺拔 的 
新 枝 。 这 些 嫩 绿 细小 的 新 枝 和 争先恐后 地 往外 伸 去 ， 像 是 比赛 似 的 。 到 了 初春 时 分 ， 这 些 新 枝 上 就 会 息 满 一 个 个 含 
苞 待 放 的 花 骨 朵 。 只 等 一 夜 春 风 歇 来 ， 这 些 个 小 花 骨 灯 便 会 在 风 中 绽开 美丽 的 笑脸 ， 用 各 自 迷 人 的 身 姿 装扮 春天 
的 大 地 。</p> 

<p class=text>&nbsp;&nbsp;&nbsp;&nbsp; 梅花 的 种 类 很 多 ， 有 白 如 雪 的 白梅 ， 有 粉 如 起 的 宫 粉 梅 ， 有 晶莹 
如 玉 的 绿 葛 梅 ， 有 火红 似 烈焰 的 朱砂 梅 。 从 花形 上 来 看 ， 梅 花 分 为 单 闪 和 复 办 ， 单 办 的 梅花 除了 细 如 发 丝 的 花蕊 
之 外 ， 周 围 只 有 五 片花 办 ， 可 是 复 闪 梅 有 时 一 灯 花 会 有 十 几 片 花 准 ……</p> 
</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 两 种 文字 设置 了 不 同 的 颜色 ， 如 图 11-7 所 示 。 其 中 ，<h2> 标 记 中 的 文字 
显示 为 红色 ; 而 段落 文字 则 以 #8B0000 颜色 显示 。 
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图 11-7 设置 颜色 


11.4.2 ”背景 颜色 一 一 background-color 


在 CSS 中 ， 使 用 background-color 属性 设置 背景 颜色 。 
语法 : background-color: 颜 色 取 值 
实例 代码 : 


<html> 
<head> 
<title> 设 置 背景 颜色 <l/title> 


h2 {font-family:" 黑 体 "; font-size:15pt; color:yellow; background-color:fuchsia } 
body {background-color: #CEDDF4} 
.text { font-family:" 宋 体 "; font-size:10pt; color:#8B0000 } 

一 > 

</style> 

</head> 
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<body> 

<h2> 梅 花 一 一 花 中 君子 </h2> 

<p class=text>&nbsp;&nbsp;&nbsp;&nbsp; 梅花 树 的 枝 干 不 是 很 粗 , 但 长 得 很 独特 。 它们 很 少 像 其 他 树 的 枝 
干 那样 笔直 地 伸 长 开 ， 而 多 是 曲 曲折 折 、 盘 旋 而 上 。 每 年 大 地 将 要 复苏 时 ， 深 褐色 的 老 枝 上 便 会 抽出 一 些 挺拔 的 
新 枝 。 这 些 嫩绿 细小 的 新 枝 争先 恐 后 地 往外 伸 去 ， 像 是 比赛 似 的 。 到 了 初春 时 分 ， 这 些 新 枝 上 就 会 肘 满 一 个 个 含 
苞 待 放 的 花 骨 朵 。 只 等 一 夜 春风 吹 来 ， 这 些 个 小 花 骨 和 采 便 会 在 风 中 绽开 美丽 的 笑脸 ， 用 各 自 迷 人 的 身 姿 装 扮 春天 
的 大 地 。</p> 

<p class=text>&nbsp;&nbsp;&nbsp;&nbsp; 梅花 的 种 类 很 多 ， 有 白 如 雪 的 白梅 ， 有 粉 如 起 的 宫 粉 梅 ， 有 晶莹 
如 玉 的 绿 世 梅 ， 有 火红 似 烈 焰 的 朱砂 梅 。 从 花形 上 来 看 ， 梅 花 分 为 音准 和 复 办 ， 单 办 的 梅花 除了 细 如 发 丝 的 花蕊 
之 外 ， 周 围 只 有 五 片花 办 ， 可 是 复 闪 梅 有 时 一 灯 花 会 有 十 几 片 花 准 ……</p> 
</body> 
</html> 


运行 这 段 代 码 , 看 到 页 面 中 标题 文字 和 页 面 的 <body> 主 体 部 分 分 别 设置 了 不 同 的 背景 色 , 如 图 11-8 
所 示 。 
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图 11-8 设置 文字 的 背景 色 


11.4.3 ”背景 图 像 一 一 background-image 


在 CSS 中 ， 背 景 图 像 属性 为 background-image， 用 来 设 定 一 个 元 素 的 背景 图 像 。 

语法 : background-image: url( 图 像 地 址 ) 

说 明 : 在 该 语法 中 ， 图 像 地 址 是 作为 背景 的 图 像 文件 的 地 址 ， 可 以 设置 成 绝对 地 址 ， 也 可 以 设置 
成 相对 地 址 。 背 景 图 片 一 般 是 JPG、PNG 或 者 GIF 格式 。 

实例 代码 : 


<html> 

<head> 

<title> 设 置 背 景 图像 </title> 

<style> 

FE 
h2 {font-family:" 黑 体 "; font-size:15pt; coloryellow; background-color:fuchsia } 
body {background-color:#CEDDF4; background-image:url(pic01.jpg)} 
.text { font-family:" 宋 体 "; font-size:10pt color:#8B0000 } 

一 > 

</style> 

</head> 
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<body> 

<h2> 梅 花 一 一 花 中 君子 </h2> 

<p class=text>&nbsp;&nbsp;&nbsp;&nbsp; 梅花 树 的 枝 干 不 是 很 粗 , 但 长 得 很 独特 。 它 们 很 少 像 其 他 树 的 枝 
干 那样 笔直 地 伸 长 开 ， 而 多 是 曲 曲折 折 、 盘 旋 而 上 。 每 年 大 地 将 要 复苏 时 ， 深 褐色 的 老 枝 上 便 会 抽出 一 些 挺拔 的 
新 枝 。 这 些 嫩绿 细小 的 新 枝 争先 恐 后 地 往外 伸 去 ， 像 是 比赛 似 的 。 到 了 初春 时 分 ， 这 些 新 枝 上 就 会 肘 满 一 个 个 含 
苞 待 放 的 花 骨 采 。 只 等 一 夜 春风 吹 来 ， 这 些 个 小 花 骨 和 采 便 会 在 风 中 绽开 美丽 的 笑脸 ， 用 各 自 迷 人 的 身 姿 装 扮 春天 
的 大 地 。</p> 

<p class=text>&nbsp;&nbsp;&nbsp;&nbsp; 梅花 的 种 类 很 多 ， 有 白 如 雪 的 白梅 ， 有 粉 如 起 的 宫 粉 梅 ， 有 晶莹 
如 玉 的 绿 葡 梅 ， 有 火红 似 烈焰 的 朱砂 梅 。 从 花形 上 来 看 ， 梅 花 分 为 单 办 和 复 闪 ， 单 办 的 梅花 除了 细 如 发 丝 的 花蕊 
之 外 ， 周 围 只 有 五 片花 办 ， 可 是 复 闪 梅 有 时 一 灯 花 会 有 十 几 片 花 准 ……</p> 
</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 页 面 效 果 如 图 11-9 所 示 。 

为 了 避免 那些 设 定 了 不 载 入 图 像 的 浏览 器 无 法 显示 相应 的 效果 这 一 问题 ， 一 般 情况 下 当 定 义 了 背 
景 图 像 后 ， 应 该 也 定义 一 个 类 似 的 背景 颜色 。 而 当 同 时 设 定 了 背景 颜色 和 背景 图 像 时 ， 会 优先 显示 背 
景 图 像 属 性 。 在 本 例 中 ， 如 果 将 浏览 器 设 定 为 不 载 入 图 像 ， 则 显示 效果 如 图 11-10 所 示 。 
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图 11-9 设置 背景 图 像 图 11-10 不 显示 背景 图 像 


为 了 说 明 背 景 图 像 的 其 他 参数 ， 在 后 面 的 实例 中 ， 并 不 会 同时 设置 背景 图 像 和 背景 颜色 。 
11.4.4 ”背景 重复 一 一 background-repeat 


背景 重复 属性 也 称 为 背景 图 像 平 铺 属性 ， 用 来 设 定 对 象 的 背景 图 像 是 否 以 及 如 何 铺 排 。 

语法 : background-repeat : 取 值 

取 值 范围 : repeat | no-repeat | repeat-x | repeat-y 

说 明 : repeat 表示 背景 图 像 在 纵向 和 横向 上 平 铺 ; no-repeat 表示 背景 图 像 不 平 铺 ， repeat-x 表示 背 
景 图 像 只 在 水 平方 向 上 平 铺 ，repeat-y 则 表示 背景 图 像 具 在 垂直 方向 上 平 铺 。 

实例 代码 : 

<html> 


<head> 


<title> 设 置 背 景 重复 属性 </title> 


h2 {font-family:" 黑 体 "; font-size:15pt; color:yellow; background-color:fuchsia } 
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body { background-image:url(pic02.jpg); background-repeat:repeat-x} 

.text { font-family:" 宋 体 "; font-size:10pt; color:#8B0000 } 
一 > 
</style> 
</head> 
<body> 

<h2> 梅 花 一 一 花 中 君子 </h2> 

<p class=text>&nbsp;&nbsp;&nbsp;&nbsp; 梅花 树 的 枝 干 不 是 很 粗 , 但 长 得 很 独特 。 它 们 很 少 像 其 他 树 的 枝 
干 那样 笔直 地 健 长 开 ， 而 多 是 曲 曲 折 折 、 盘 旋 而 上 。 每 年 大 地 将 要 复苏 时 ， 深 褐色 的 老 枝 上 便 会 抽出 一 些 挺拔 的 
新 枝 。 这 些 嫩 绿 细小 的 新 枝 和 争先恐后 地 往外 伸 去 ， 像 是 比赛 似 的 。 到 了 初春 时 分 ， 这 些 新 枝 上 就 会 息 满 一 个 个 含 
苞 待 放 的 花 骨 朵 。 只 等 一 夜 春 风 吹 来 ， 这 些 个 小 花 骨 灯 便 会 在 风 中 绽开 美丽 的 笑脸 ， 用 各 自 迷 人 的 身 姿 装扮 春天 
的 大 地 。</p> 

<p class=text>&nbsp;&nbsp;&nbsp;&nbsp; 梅花 的 种 类 很 多 ， 有 和 白 如 雪 的 白梅 ， 有 粉 如 霞 的 宫 粉 梅 , 有 晶莹 
如 玉 的 绿 昔 梅 ， 有 火红 似 烈焰 的 朱砂 梅 。 从 花形 上 来 看 ， 梅 花 分 为 单 锥 和 复 办 ， 单 办 的 梅花 除了 细 如 发 丝 的 花蕊 
之 外 ， 周 围 只 有 五 片花 瓣 ， 可 是 复 斩 梅 有 时 一 条 花 会 有 十 几 片 花瓣 ……</p> 
</body> 
</html> 


运行 代码 ， 看 到 背景 图 像 只 在 水 平方 向 平 铺 的 效果 ， 如 图 11-11 所 示 。 
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图 11-11 设置 背景 图 像 的 重复 方式 


11.4.5 背景 附件 一 一 background-attachment 


背景 附件 属性 用 来 设置 背景 图 像 是 随 对 象 内 容 滚动 还 是 固定 的 。 

语法 : background-attachment : 取 值 

取 值 范围 : scroll | fixed 

说 明 : scroll 表示 背景 图 像 是 随 对 象 内 容 滚动， 是 默认 选项 ，fixed 表示 背景 图 像 固定 在 页 面 上 静 

止 不 动 ， 只 有 其 他 的 内 容 随 滚动 条 滚动 。 

实例 代码 : 

<html> 

<head> 

<title> 设 置 背 景 附 件 </title> 

<style> 

<!-- 
h2 {font-family:" 黑 体 "; font-size:15pt; coloryellow; background-color:fuchsia } 
body { background-image:url(pic02.jpg); background-repeat:no-repeat; 

background-attachment:fixed } 
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.text { font-family:" 宋 体 "; font-size:12pt; color:#8B0000 } 
一 > 
</style> 
</head> 
<body> 

<h2> 梅 花 一 一 花 中 君子 </h2> 

<p class=text>&nbsp;&nbsp;&nbsp;&nbsp; 梅花 树 很 少 像 其 他 树 的 枝 干 那样 笔直 地 伸 长 开 ， 而 多 是 曲 曲折 
折 、 盘 旋 而 上 。 每 年 大 地 复苏 时 ， 深 褐色 的 老 枝 上 便 会 抽出 一 些 挺拔 的 新 枝 。 这 些 嫩绿 细小 的 新 枝 和 争先恐后 地 往 
外 伸 去 。 到 了 初春 时 分 ， 这 些 新 枝 上 就 会 的 满 一 个 个 含苞 待 放 的 花 骨 朵 。 只 等 一 夜 春 风 吹 来 ， 这 些 个 小 花 骨 灯 便 
会 在 风 中 绽开 美丽 的 笑脸 ， 用 各 自 迷 人 的 身 姿 装扮 春天 的 大 地 。</p> 

<p class=text>&nbsp;&nbsp;&nbsp;&nbsp; 梅花 的 种 类 很 多 ， 有 白 如 雪 的 白梅 ， 有 粉 如 起 的 宫 粉 梅 ， 有 晶莹 
如 玉 的 绿 世 梅 ， 有 火红 似 烈 焰 的 朱砂 梅 。 从 花形 上 来 看 ， 梅 花 分 为 单 闪 和 复 办 ， 单 办 的 梅花 除了 细 如 发 丝 的 花蕊 
之 外 ， 周 围 只 有 五 片花 办 ， 可 是 复 闪 梅 有 时 一 灯 花 会 有 十 几 片 花 办 。</p> 

<p class=text>&nbsp;&nbsp;&nbsp;&nbsp; 绿 昔 梅 的 花 办 几乎 是 透明 的 ， 像 玉 琢 成 的 ， 白 中 透 着 几 分 绿 意 ， 
显得 淡雅 高 贵 。 用 手 摸 一 摸 ， 像 丝绒 一 般 柔 滑 。 这 样 的 梅花 很 有 些 冰清玉洁 的 韵 致 。 朱 砂 梅 则 是 那样 的 引 人 注 目 ， 
远 远 望 去， 一 团团 、 一 徐徐 的 ， 像 跳动 的 火焰 在 春风 中 般 遍 起 舞 ……</p> 
</body> 
</html> 


运行 代码 ， 看 到 图 片 开 始 的 位 置 是 页 面 的 左上 端 ， 紧 贴 页面 边 缘 ， 如 图 11-12 所 示 。 拖 动 滚动 条 ， 


让 页 面 中 的 文字 向 上 滚动 ， 发 现 只 有 文字 向 上 滚动 到 显示 的 页 面 之 外 ， 而 背景 图 像 的 位 置 依然 在 页 面 
的 左上 端 ， 没 有 滚动 到 页 面 之 外 ， 如 图 11-13 所 示 。 
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图 11-12 设置 背景 附件 图 11-13” 拖 动 滚动 条 的 效果 


11.4.6 ”背景 位 置 一 一 background-position 


背景 位 置 属性 用 于 指定 背景 图 像 的 最 初 位 置 。 这 个 属性 只 能 应 用 于 块 级 元 素 和 蔡 换 元 素 。 蔡 换 元 


素 仅 指 一 些 已 知 原 有 尺寸 的 元 素 ， 在 HTML 中 ， 替 换 元 素 包括 img、input、textarea、select 和 object。 


语法 : background-position: 位 置 取 值 
取 值 范围 : [< 百分比 > | < 长 度 >]{1,2} | [top | center | bottom] || [left | center | right] 
说 明 : 该 语法 中 的 取 值 范围 包括 两 种 ， 一 种 是 采用 数字 ， 即 [< 百分比 > | < 长 度 >]{1,2}; 另 一 种 是 


关键 字 描述 ， 即 [top | center | bottom] || [left | center | right]， 它 们 的 具体 含义 如 下 : 


口 [< 百分比 > | < 长 度 >]{1,2}: 表示 使 用 确切 的 数字 表示 图 像 位 置 ， 使 用 时 应 首先 指定 横向 位 置 ， 
接着 是 纵向 位 置 。 例 如 20% 65%， 指 定 图 像 会 被 放 在 元 素 的 左 起 20%、 上 起 65% 的 那 点 的 所 在 
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位 置 。 百分比 和 长 度 可 以 混合 使 用 , 设 定 为 负 值 也 是 允许 的 。 默 认 情况 下 , 位 置 的 取 值 是 0% 0% 。 
口 [top | center | bottom] | [left | center | right]: lef、center、right 是 横向 的 关键 字 ， 它 们 表示 在 横 
向 上 取 0%、50%、100% 的 位 置 ， 即 采用 居 左 、 居 中 和 居 右 ; top、center、bottom 是 纵向 的 关 
键 字 ， 它 们 分 别 表示 在 纵向 上 取 0%、50%、100% 的 位 置 ， 即 位 于 顶端 、 居 中 和 底 端 。 
实例 代码 : 


<html> 
<head> 
<title> 设 置 背景 位 置 </title> 
<style> 
二 

h2 { font-family:" 黑 体 "; font-size:15pt; color:yellow; background-colorfuchsia } 

body { background-image:url(pic02.jpg); background-repeat:no-repeat; 

background-position:left bottom } 

.text { font-family:" 宋 体 "; font-size:10pt; color:#8B0000 } 
一 > 
</style> 
</head> 
<body> 

<h2> 梅 花 一 一 花 中 君子 </h2> 

<p class=text>&nbsp;&nbsp;&nbsp;&nbsp; 梅花 树 的 枝 干 不 是 很 粗 , 但 长 得 很 独特 。 它 们 很 少 像 其 他 树 的 枝 
干 那样 笔直 地 伸 长 开 ， 而 多 是 曲 曲折 折 、 盘 旋 而 上 。 每 年 大 地 将 要 复苏 时 ， 深 褐色 的 老 枝 上 便 会 抽出 一 些 挺拔 的 
新 枝 。 这 些 嫩绿 细小 的 新 枝 争 先 恐 后 地 往外 伸 去 ， 像 是 比赛 似 的 。 到 了 初春 时 分 ， 这 些 新 枝 上 就 会 礁 满 一 个 个 含 
苞 待 放 的 花 骨 条 。 只 等 一 夜 春风 吹 来 ， 这 些 个 小 花 骨 条 便 会 在 风 中 绽开 美丽 的 笑脸 ， 用 各 自 迷 人 的 身 姿 装 扮 春天 
的 大 地 。</p> 

<p class=text>&nbsp;&nbsp;&nbsp;&nbsp; 梅花 的 种 类 很 多 ， 有 白 如 雪 的 白梅 ， 有 粉 如 霞 的 宫 粉 梅 ， 有 晶莹 
如 玉 的 绿 昔 梅 ， 有 火红 似 烈焰 的 朱砂 梅 。 从 花形 上 来 看 ， 梅 花 分 为 单 锥 和 复 办 ， 单 斩 的 梅花 除了 细 如 发 丝 的 花蕊 
之 外 ， 周 围 只 有 五 片花 办 ， 可 是 复 准 梅 有 时 一 朵 花 会 有 十 几 片 花 准 ……</p> 
</body> 
</html> 


运行 这 段 代码 ， 看 到 背景 图 像 位 于 页 面 的 左下 角 ， 如 图 11-14 所 示 。 
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图 11-14 设置 背景 位 置 
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11.4.7 复合 属性 : 背景 一 一 background 


与 字体 font 属性 类 似 ， 背 景 background 也 是 复合 属性 ， 它 是 一 个 更 明确 的 背景 关系 属性 的 略 写 。 

语法 : background: 取 值 

说 明 : 在 这 里 ， 取 值 范围 可 以 包含 背景 颜色 、 背 景 图 像 、 重 复 属 性 、 附 件 属性 和 背景 位 置 ， 之 间 
用 空格 相连 。 例 如 ， 可 以 设置 为 body{ background:#00F url(pic02.jpg) no-repeat} ， 表 示 <body> 标 记 内 的 
背景 颜色 为 蓝 色 blue， 背 景 图 像 为 pic02.jpg， 图 像 不 重复 显示 。 

实例 代码 : 


<html> 
<head> 
<title> 设 置 背景 属性 </title> 
<style> 
< 

h2 {font-family:" 黑 体 "; font-size:15pt; color:yellow; background-color:fuchsia } 

body { background: url(pic02.jpg) no-repeat right bottom } 

.text { font-family:" 宋 体 "; font-size:10pt; color:#8B0000 } 
一 > 
</style> 
</head> 
<body> 

<h2> 梅 花 一 一 花 中 君子 </h2> 

<p class=text>&nbsp;&nbsp;&nbsp;&nbsp; 梅花 树 的 枝 干 不 是 很 粗 , 但 长 得 很 独特 。 它 们 很 少 像 其 他 树 的 枝 
干 那样 笔直 地 伸 长 开 ， 而 多 是 曲 曲折 折 、 盘 旋 而 上 。 每 年 大 地 将 要 复苏 时 ， 深 褐色 的 老 枝 上 便 会 抽出 一 些 挺 找 的 
新 枝 。 这 些 嫩 绿 细小 的 新 枝 争先 恐 后 地 往外 伸 去 ， 像 是 比赛 似 的 。 到 了 初春 时 分 ， 这 些 新 枝 上 就 会 仆 满 一 个 个 含 
巷 待 放 的 花 骨 洒 。 只 等 一 夜 春风 吹 来 ， 这 些 个 小 花 骨 条 便 会 在 风 中 绽开 美丽 的 笑脸 ， 用 各 自 迷 人 的 身 姿 装 扮 春天 
的 大 地 。</p> 

<p class=text>&nbsp;&nbsp;&nbsp;&nbsp; 梅花 的 种 类 很 多 ， 有 和 白 如 雪 的 白梅 ， 有 粉 如 霞 的 宫 粉 梅 ; 有 晶莹 
如 玉 的 绿 蔓 梅 ， 有 火红 似 烈焰 的 朱砂 梅 。 从 花形 上 来 看 ， 梅 花 分 为 单 礁 和 复 办 ， 单 办 的 梅花 除了 细 如 发 丝 的 花蕊 
之 外 ， 周 围 只 有 五 片花 办 ， 可 是 复 闪 梅 有 时 一 朵 花 会 有 十 几 片 花 准 ……</p> 
</body> 
</html> 


运行 代码 ， 看 到 成 功 实现 了 对 背景 的 各 种 参数 的 设置 ， 如 图 11-15 所 示 。 
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11-15 设置 背景 属性 
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11.5 文本 属性 


在 CSS 中 ,文本 属性 主要 包括 单词 间隔 、 字 符 间 隔 、 文 字 修饰 、 纵 向 排列 、 文 本 转换 、 文 本 排列 、 
文本 缩 进 、 行 高 等 几 种 属性 。 


11.5.1 单词 间隔 一 一 word-spacing 


单词 间隔 用 来 定义 附加 在 单词 之 间 的 间隔 的 数量 ， 但 其 取 值 必须 符合 长 度 格式 。 单 词 间 隔 的 设置 
多 用 于 英文 文本 中 。 

语法 : word-spacing: 取 值 

取 值 范围 : normal | < 长 度 > 

说 明 : normal 是 指正 常 的 间隔 ， 是 默认 选项 ; 长 度 是 设 定单 词 间隔 的 数值 及 单位 ， 可 以 使 用 负 值 。 

实例 代码 : 


<html> 
<head> 
<title> 设 置 单 词 间隔 </title> 
<style> 
<!-- 
h2 {font-size:18pt; word-spacing:8px} 
.text { font-size:12pt; word-spacing: normal} 
.newtext { font-size:12pt; word-spacing: 7px} 
一 > 
</style> 
</head> 
<body> 
<h2> contrast </h2> 
<p class=text>The craftsman, Arnold, came from a family of carpenters. </p> 
<p class=newtext>The craftsman, Amold, came from a family of carpenters. </p> 
</body> 
</html> 


运行 这 段 代 码 ， 可 以 看 到 两 段 内 容 相同 的 文字 由 于 设置 了 不 同 的 单词 间隔 而 显示 出 不 同 的 效果 ， 
如 图 11-16 所 示 。 


图 11-16 设置 单词 间隔 
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11.5.2 ”字符 间隔 一 一 letter-spacing 


字符 间隔 和 单词 间隔 类 似 ， 不 同 的 是 字符 间隔 用 于 设置 字符 的 间隔 数 。 
语法 : letter-spacing: 取 值 

取 值 范围 : normal | < 长 度 > 

实例 代码 : 


<html> 
<head> 
<title> 设 置 字 符 间隔 </title> 
<style> 
2 

h2 {font-family: 黑 体 ; font-size:16pt; letter-spacing:10px} 

.text {font-size:10pt; letter-spacing: normal} 

.newtext {font-size:10pt; letter-spacing: 4px} 
一 > 
</style> 
</head> 
<body> 

<h2> 木 兰 从 军 </h2> 

<p class=text>&nbsp;&nbsp;&nbsp;&nbsp; 北魏 末年 ， 柔 然 、 契 丹 等 少数 民族 日 渐 强大 ， 他 们 经 常 派兵 侵扰 
中 原 地 区 ， 抢 动 财物 。 北 魏 朝 廷 为 了 对 付 他 们 ， 常 常 大 量 征兵 ， 加 强 北部 边境 的 驻防 。 木 兰 从 小 跟着 父亲 读书 写 
字 。 她 还 喜欢 骑马 射箭 ， 练 得 一 身 好 武艺 。</p> 

<p class=newtext>&nbsp;&nbsp;&nbsp;&nbsp; 有 一 天 ， 生 门 里 的 差 役 送 来 了 征兵 的 通知 ， 要 征 木 兰 的 父亲 
去 当 兵 。 但 父亲 年 纪 老 迈 ， 又 怎 能 参军 打仗 呢 ? 木兰 没有 哥哥 ， 弟 弟 又 太 小 ， 她 不 忍心 让 年 老 的 父亲 去 受苦 ， 于 
是 决定 女 扮 男装 ， 代 父 从 军 。 木 兰 父 母 虽 不 舍得 女儿 出 征 ， 但 又 无 他 法 ， 只 好 同意 她 去 了 。 木 兰 随 着 队伍 ， 到 了 
北方 边境 。 她 担心 自己 女 扮 男装 的 秘密 被 人 发 现 ， 故 此 处 处 加 售 小 心 。 白 天 行军 ， 木 兰 紧 紧 地 跟 上 队伍 ， 从 不 敢 
掉队 。 夜 晚 宿营 ， 她 从 来 不 敢 脱 衣服 。 作 战 的 时 候 ， 她 赁 着 一 身 好 武艺 ， 总 是 冲 杀 在 前 ……</p> 
</body> 
</html> 


运行 代码 ， 可 以 看 到 两 段 文字 设置 了 不 同 字符 间隔 的 效果 ， 如 图 11-17 所 示 。 


图 11-17 设置 字符 间隔 


11.5.3 ”文字 修饰 一 一 text-decoration 


文字 修饰 属性 主要 是 用 于 对 文本 进行 修饰 ， 如 设置 下 划 线 、 删 除 线 等 。 
语法 : text-decoration: 修 饰 值 
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取 值 范围 : none | [underline || overline || line-through || blink ] 

说 明 : none 表示 不 对 文本 进行 修饰 ， 这 是 默认 属性 值 ， underline 表示 对 文字 添加 下 划 线 ，overline 
表示 对 文本 添加 上 划 线 ; line-through 表示 对 文本 添加 删除 线 ; blink 则 表示 文字 闪烁 效果 ， 这 一 属性 值 
只 有 在 Netscape 浏览 器 中 才能 正常 显示 。 

实例 代码 : 


<html> 

<head> 

<title> 文 字 修饰 </title> 

<style> 

<!-- 
h2 {font-family: 黑 体 ; font-size:16pt; letter-spacing:10px; text-decoration: none} 
.text {font-size:10pt; text-decoration: underline} 
.newtext {font-size:10pt; text-decoration: line-through} 


一 > 
</style> 
</head> 
<body> 

<h2> 木 兰 从 军 </h2> 

<p class=text> 北 魏 未 年 ， 柔 然 、 契 丹 等 少数 民族 日 渐 强大 ， 他 们 经 常 派兵 侵扰 中 原 地 区 ， 抢 劫 财物 。 北 魏 朝 
廷 为 了 对 付 他 们 ， 常 常 大 量 征兵 ， 加 强 北部 边境 的 驻防 。 木 兰 从 小 跟着 父亲 读书 写字 。 她 还 喜欢 骑马 射箭 ， 练 得 
一 身 好 武艺 。</p> 

<p class=newtext> 有 一 天 ， 衙 门 里 的 差 役 送 来 了 征兵 的 通知 ， 要 征 木 兰 的 父亲 去 当 兵 。 但 父亲 年 纪 老 迈 ， 又 
怎 能 参军 打仗 呢 ? 木兰 没有 哥哥 ， 弟 弟 又 太 小 ， 她 不 忍心 让 年 老 的 父亲 去 受苦 ， 于 是 决定 女 扮 男装 ， 代 父 从 军 。 
木兰 父母 虽 不 舍得 女儿 出 征 ， 但 又 无 他 法 ， 只 好 同意 她 去 了 。 木 兰 随 着 队伍 ， 到 了 北方 边境 。 她 担心 自己 女 扮 男 
装 的 秘密 被 人 发 现 ， 故 此 处 处 加 们 小 心 。 和 白天 行军 ， 木 兰 紧 紧 地 跟 上 队伍 ， 从 不 敢 掉队 。 夜 晚 宿营 ， 她 从 来 不 敢 
脱衣 服 。 作 战 的 时 候 ， 她 赁 着 一 身 好 武艺 ， 总 是 冲 杀 在 前 ……</p> 
</body> 
</html> 


运行 这 段 代码 , 看 到 第 一 段 的 段落 文字 使 用 了 下 划 线 , 第 二 段 文字 则 使 用 了 删除 线 , 效果 如 图 11-18 
所 示 。 
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图 11-18 设置 文字 修饰 属性 


11.5.4 ”纵向 排列 一 一 vertical-align 


纵向 排列 属性 也 称 为 垂直 对 齐 方式 ， 它 可 以 设置 一 个 内 部 元 素 的 纵向 位 置 ， 相 对 于 它 的 上 级 元 素 
或 相对 于 元 素 行 。 内 部 元 素 是 没有 行 在 其 前 和 后 断 开 的 元 素 , 例如 ,在 HTML 中 的 A 和 IMG。 它 主要 
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用 于 对 图 像 的 纵向 排列 。 

语法 : vertical-align: 排 列 取 值 

取 值 范 围 : baseline | sub | super | top | text-top | middle | bottom | text-bottom | < 百分比 > 

说 明 : baseline 使 元 素 和 上 级 元 素 的 基线 对 齐 ; sub 为 下 标 ; super 为 上 标 ; top 使 元 素 和 行 中 最 多 
的 元 素 向 上 对 齐 ; text-top 使 元 素 和 上 级 元 素 的 字体 向 上 对 齐 ; middle 是 纵向 对 齐 元 素 基 线 加 上 上 级 元 
素 的 x 高 度 的 一 半 的 中 点 ， 其 中 x 高 度 是 字母 “ x ”的 高 度 ; text-bottom 使 元 素 和 上 级 元 素 的 字体 向 
下 对 齐 。 

影响 相对 于 元 素 行 的 位 置 的 关键 字 有 top 和 bottom。 其 中 , top 使 元 素 和 行 中 最 高 的 元 素 向 上 对 齐 ; 
bottom 使 元 素 和 行 中 最 低 的 元 素 向 下 对 齐 。 

百分比 是 一 个 相对 于 元 素 行 高 属性 的 百分比 ， 它 会 在 上 级 基线 上 增高 元 素 基 线 的 指定 数量 。 这 里 
允许 使 用 负 值 ， 负 值 表示 减少 相应 的 数量 。 

实例 代码 : 

<html> 

<head> 

<title> 纵 向 排列 </title> 


<style> 
<|-- 


body{font-size:12pt;} 
img{ vertical-align:-100%} 
.exponent{font-size:9pt; vertical-align: super } 
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</style> 

</head> 

<body> 
在 方程 式 中 的 指数 部 分 应 用 上 标的 效果 : <br> 
X<font class=exponent>3</font>-3=0<br><br> 
这 是 一 幅 图 像 : <img src="pic03.jpg"> 

</body> 

</html> 


运行 代码 ， 可 以 看 到 效果 如 图 11-19 所 示 。 图 11-19 设置 文本 的 纵向 排列 
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11.5.5 文本 转换 一 一 text-transform 


文本 转换 属性 仅 被 用 于 表达 某 种 格式 的 要 求 ， 确 切 地 说 ， 是 用 来 转换 英文 文字 的 大 小 写 的 。 

语法 : text-transform: 转换 值 

取 值 范围 : none | capitalize | uppercase | lowercase 

说 明 : 文本 转换 属性 允许 通过 4 个 属性 中 的 一 个 来 转换 文本 。 其 中 , none 表示 使 用 原始 值 ; capitalize 
使 每 个 字 的 第 一 个 字母 大 写 ; uppercase 使 每 个 字 的 所 有 字母 大 写 ; lowercase 则 使 每 个 字 的 所 有 字母 
小 写 。 

实例 代码 : 

<html> 

<head> 
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<title> 设 置 英文 的 大 小 写 </title> 
<style> 
<I-- 
h2{ font-size:14pt} 
.textn{ font-size:12pt; text-transform: none} 
.textc{ font-size:12pt; text-transform: capitalize } 
.textu{ font-size:12pt; text-transform: uppercase } 
.textl{ font-size:12pt; text-transform: lowercase } 
一 > 
</style> 
</head> 
<body> 
<h2> 下 面 是 相同 的 一 句 话 设置 不 同 的 转换 值 效 果 : </h2> 
<p class=textn>The craftsman, Amold, came from a family of carpenters. </p> 
<p class=textc>The craftsman, Arnold, came from a family of carpenters. </p> 
<p class=textu>The craftsman, Amold, came from a family of carpenters. </p> 
<p class=textl>The craftsman, Arnold, came from a family of carpenters. </p> 
</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 设置 了 不 同 转换 值 的 段落 文字 显示 方式 也 不 同 ， 如 图 11-20 所 示 。 
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图 11-20 设置 不 同 的 转换 值 效 果 


11.5.6 文本 排列 一 一 text-align 


文本 排列 属性 能 够 使 元 素 文本 得 到 排列 。 这 个 属性 的 功能 类 似 于 HTML 的 段 、 标 题 和 部 分 的 align 

语法 : text-align: 排 列 值 

取 值 范围 : left | right | center | justify 

说 明 : 在 该 语法 中 ,可 以 选择 4 个 对 齐 方式 中 的 一 个 。 其中, left 为 左 对 齐 ; right 为 右 对 齐 ; center 
为 居中 对 齐 ; justify 为 两 端 对 齐 。 

实例 代码 : 

<html> 

<head> 

<title> 文 本 排列 </title> 


<style> 
i 
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h2 {font-family: 黑 体 ; font-size:16pt; letter-spacing:10px; text-align: center} 

.text {font-size:10pt; text-align: left} 

.newtext {font-size:10pt; text-align: right} 
一 > 
</style> 
</head> 
<body> 

<h2> 木 兰 从 军 </h2> 

<p class=text> 北 魏 未 年 ， 柔 然 、 契 丹 等 少数 民族 日 渐 强大 ， 他 们 经 常 派兵 侵扰 中 原 地 区 ， 抢 劫 财物 。 北 魏 朝 
廷 为 了 对 付 他 们 ， 常 常 大 量 征兵 ， 加 强 北部 边境 的 驻防 。 木 兰 从 小 跟着 父亲 读书 写字 。 她 还 喜欢 骑马 射箭 ， 练 得 
一 身 好 武艺 。</p> 

<p class=newtext> 有 一 天 ， 衙 门 里 的 差 役 送 来 了 征兵 的 通知 ， 要 征 木兰 的 父亲 去 当 兵 。 但 父亲 年 纪 老 迈 ， 又 
怎 能 参军 打仗 呢 ? 木兰 没有 哥哥 ， 弟 弟 又 太 小 ， 她 不 忍心 让 年 老 的 父亲 去 受苦 ， 于 是 决定 女 扮 男装 ， 代 父 从 军 。 
木兰 父母 虽 不 舍得 女儿 出 征 ， 但 又 无 他 法 ， 只 好 同意 她 去 了 。 木 兰 随 着 队伍 ， 到 了 北方 边境 。 她 担心 自己 女 扮 男 
装 的 秘密 被 人 发 现 ， 故 此 处 处 加 们 小 心 。 和 白天 行军 ， 木 兰 紧 紧 地 跟 上 队伍 ， 从 不 敢 掉队 。 夜 晚 宿营 ， 她 从 来 不 敢 
脱衣 服 。 作 战 的 时 候 ， 她 赁 着 一 身 好 武艺 ， 总 是 冲 杀 在 前 ……</p> 
</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 如 图 11-21 所 示 的 效果 。 
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图 11-21 设置 文本 对 齐 方式 


11.5.7 “文本 缩 进 一 一 text-indent 


置 段落 的 首 行 缩 进 。 
语法 : text-indent: 缩 进 值 
说 明 : 文本 的 缩 进 值 必须 是 一 个 长 度 或 一 个 百分比 。 若 设 定 为 百分比 ， 则 以 上 级 元 素 的 宽度 而 定 。 
实例 代码 : 
<html> 


<head> 


<title> 设 置 文本 缩 进 </title> 


h2 {font-family: 黑 体 ; font-size:16pt} 
.text {font-size:10pt; text-indent:50%} 


224 。 HTML 网 页 设计 参考 手册 


.newtext {font-size:10pt; text-indent:20pt} 
一 > 
</style> 
</head> 
<body> 

<h2> 木 兰 从 军 </h2> 

<p class=text> 北 魏 未 年 ， 柔 然 、 契 丹 等 少数 民族 日 渐 强大 ， 他 们 经 常 派兵 侵扰 中 原 地 区 ， 抢 劫 财物 。 北 魏 朝 
廷 为 了 对 付 他 们 ， 常 常 大 量 征兵 ， 加 强 北 部 边境 的 驻防 。 木 兰 从 小 跟着 父亲 读书 写字 。 她 还 喜欢 骑马 射箭 ， 练 得 
一 身 好 武艺 。</p> 

<p class=newtext> 有 一 天 ， 衙 门 里 的 差 役 送 来 了 征兵 的 通知 ， 要 征 木 兰 的 父亲 去 当 兵 。 但 父亲 年 纪 老 迈 ， 又 
怎 能 参军 打仗 呢 ? 木兰 没有 哥哥 ， 弟 弟 又 太 小， 她 不 忍心 让 年 老 的 父亲 去 受苦 ， 于 是 决定 女 扮 男 装 ， 代 父 从 军 。 
木兰 父母 虽 不 舍得 女儿 出 征 ， 但 又 无 他 法 ， 只 好 同意 她 去 了 。 木 兰 随 着 队伍 ， 到 了 北方 边境 。 她 担心 自己 女 扮 男 
装 的 秘密 被 人 发 现 ， 故 此 处 处 加 们 小 心 。 和 白天 行军 ， 木 兰 紧 紧 地 跟 上 队伍 ， 从 不 敢 掉队 。 夜 晚 宿营 ， 她 从 来 不 敢 
脱衣 服 。 作 战 的 时 候 ， 她 赁 着 一 身 好 武艺 ， 总 是 冲 杀 在 前 ……</p> 
</body> 
</html> 


运行 程序 ,效果 如 图 11-22 所 示 。 其 中 第 一 段 设 定 了 首 行 缩 进 为 50%, 段落 的 上 一 级 元 素 是 <body>， 
因此 首 行 缩 进 文本 主体 宽度 的 一 半 ; 第 二 段 设 定 了 首 行 缩 进 为 20pt。 
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图 11-22 设置 文本 的 首 行 缩 进 


11.5.8 ”文本 行 高 一 line-height 


行 高 属性 用 于 控制 文本 基线 之 间 的 间隔 值 。 
语法 : line-height: 行 高 值 
取 值 范围 ，normal | < 数字 > | < 长 度 > | < 百分比 > 
说 明 : normal 表示 默认 的 行 高 ， 一 般 由 字体 大 小 的 属性 自动 产生 ; 值 为 数字 时 ， 行 高 由 元 素 字 体 
大 小 的 量 与 该 数字 相 乘 所 得 ;长 度 属 性 则 是 直接 使 用 数字 和 单位 设置 行 高 ， 值 为 百分比 时 ， 表 示 相 对 
于 元 素 字体 大 小 的 比例 ， 不 允许 使 用 负 值 。 
实例 代码 : 
<html> 
<head> 
<title> 设 置 文本 的 行 高 </title> 
<style> 
< 
h2 {font-family: 黑 体 ; font-size:16pt; line-height:1.2} 
.text {font-size:10pt; text-indent:10%; line-height: 12pt} 


第 11 章 _CSS 样式 表 。225。 


-newtext {font-size:10pt; text-indent:20pt; line-height: 200%} 
一 > 
</style> 
</head> 
<body> 

<h2> 木 兰 从 军 </h2> 

<p class=text> 北 魏 未 年 ， 柔 然 、 契 丹 等 少数 民族 日 渐 强大 ， 他 们 经 常 派兵 侵扰 中 原 地 区 ， 抢 劫 财物 。 北 魏 朝 
廷 为 了 对 付 他 们 ， 常 常 大 量 征兵 ， 加 强 北部 边境 的 驻防 。 木 兰 从 小 跟着 父亲 读书 写字 。 她 还 喜欢 骑马 射箭 ， 练 得 
一 身 好 武艺 。</p> 

<p class=newtext> 有 一 天 ， 衙 门 里 的 差 役 送 来 了 征兵 的 通知 ， 要 征 木 兰 的 父亲 去 当 兵 。 但 父亲 年 纪 老 迈 ， 又 
怎 能 参军 打仗 呢 ? 木兰 没有 哥哥 ， 弟 弟 又 太 小， 她 不 忍心 让 年 老 的 父亲 去 受苦 ， 于 是 决定 女 扮 男装 ， 代 父 从 军 。 
木兰 父母 虽 不 舍得 女儿 出 征 ， 但 又 无 他 法 ， 只 好 同意 她 去 了 。 木 兰 随 着 队伍 ， 到 了 北方 边境 。 她 担心 自己 女 扮 男 
装 的 秘密 被 人 发 现 ， 故 此 处 处 加 倍 小心 。 和 白天 行军 ， 木 兰 紧 紧 地 跟 上 队伍 ， 从 不 敢 掉队 。 夜 晚 宿营 ， 她 从 来 不 敢 
脱衣 服 。 作 战 的 时 候 ， 她 赁 着 一 身 好 武艺 ， 总 是 冲 杀 在 前 ……</p> 
</body> 
</html> 


运行 代码 ， 可 以 看 到 两 个 段落 设置 不 同行 高 的 效果 ， 如 图 11-23 所 示 。 
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图 11-23 设置 行 高 


11.5.9 处理 空白 一 一 white-space 


white-space 属性 用 于 设置 页 面 对 象 内 空白 (包括 空格 和 换行 等 ) 的 处 理 方式 。 默 认 情况 下 ，HTML 


中 的 连续 多 个 空格 会 被 合并 成 一 个 ， 而 使 用 这 一 属性 可 以 设置 成 其 他 的 处 理 方式 。 


语法 : white-space : 值 
取 值 范围 : normal | pre | nowrap 
说 明 : white-space 只 能 取 3 个 值 中 的 一 个 ， 其 中 normal 是 默认 属性 ， 即 将 连续 的 多 个 空格 合并 ; 


pre 会 导致 源 中 的 空格 和 换行 符 被 保留 但 这 一 选项 只 有 在 Internet Explorer 6 中 才能 正确 显示 ; nowrap 
则 表示 强制 在 同一 行内 显示 所 有 文本 ， 直 到 文本 结束 或 者 遇 到 <br> 对 象 。 


实例 代码 : 


<html> 
<head> 


<title> 设 置 空格 处 理 方式 </title> 


h2 {font-family: 黑 体 ; font-size:16pt } 


*。226。 HTML 网 页 设计 参考 手册 


.text {font-size:10pt; text-indent:20pt white-space: nowrap} 

.newtext {font-size:10pt; text-indent:20pt} 
一 > 
</style> 
</head> 
<body> 

<h2> 木 兰 从 军 </h2> 

<p class=text> 北 魏 未 年 ， 柔 然 、 契 丹 等 少数 民族 日 渐 强大 ， 他 们 经 常 派兵 侵扰 中 原 地 区 ， 抢 劫 财物 。 北 魏 朝 
廷 为 了 对 付 他 们 ， 常 常 大 量 征兵 ， 加 强 北部 边境 的 驻防 。 木 兰 从 小 跟着 父亲 读书 写字 。 她 还 喜欢 骑马 射箭 ， 练 得 
一 身 好 武艺 。</p> 

<p class=newtext> 有 一 天 ， 衙 门 里 的 差 役 送 来 了 征兵 的 通知 ， 要 征 木兰 的 父亲 去 当 兵 。 但 父亲 年 纪 老 迈 ， 又 
怎 能 参军 打仗 呢 ? 木兰 没有 哥哥 ， 弟 弟 又 太 小 ， 她 不 忍心 让 年 老 的 父亲 去 受苦 ， 于 是 决定 女 扮 男 装 ， 代 父 从 军 。 
木兰 父母 虽 不 舍得 女儿 出 征 ， 但 又 无 他 法 ， 只 好 同意 她 去 了 。 木 兰 随 着 队伍 ， 到 了 北方 边境 。 她 担心 自己 女 扮 男 
装 的 秘密 被 人 发 现 ， 故 此 处 处 加 们 小 心 。 白 天 行军 ， 木 兰 紧 紧 地 跟 上 队伍 ， 从 不 敢 掉队 。 夜 晚 宿营 ， 她 从 来 不 敢 
脱衣 服 。 作 战 的 时 候 ， 她 赁 着 一 身 好 武艺 ， 总 是 冲 杀 在 前 ……</p> 
</body> 
</html> 
运行 程序 ， 效 果 如 图 11-24 所 示 。 页 面 第 一 个 段落 的 文字 被 强迫 在 同一 行内 显示 。 
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图 11-24 设置 空白 属性 


11.5.10 ”文本 反 排 一 一 unicode-bidi 与 direction 


unicode-bidi 属性 用 于 设置 或 获取 关于 双向 法 则 的 嵌入 级 别 ， 通 俗 一 些 地 说 ， 就 是 用 于 同一 个 页 面 
里 存在 从 不 同方 向 读 进 的 文本 的 显示 ， 它 一 般 与 direction 属性 一 起 使 用 ，direction 属性 用 来 设置 对 象 
的 阅读 顺序 。 

1.unicode-bidi 属性 

语法 : unicode-bidi :normal | bidi-override | embed 

说 明 : normal 是 系统 的 默认 值 , 表示 对 和 象 不 打开 附加 的 嵌入 层 ; bidi-override 表示 严格 按照 direction 
属性 的 值 重 排序 ， 忽 略 隐 式 双 向 运算 规则 ; embed 表示 对 象 打开 附加 的 嵌入 层 ， 将 direction 属性 的 值 
指定 给 嵌入 层 ， 在 对 象 内 部 进行 隐 式 重 排序 。 如 果 想 要 在 内 联 文 本 中 应 用 direction 属性 ， 必 须 设 定 该 
属性 的 值 为 embed 或 bidi-override。 


外 注意 : Unicode 双向 运算 法 则 是 自动 翻转 谋 入 字符 顺序 依照 它们 固有 的 流动 方向 。 例 如 ， 莱 文 文档 
的 默认 书写 方向 是 从 左 到 右 ， 假 如 其 中 包含 的 部 分 其 他 语种 的 字符 其 书写 方向 是 从 右 到 左 ， 
双向 运算 法 则 就 可 以 用 来 代理 用 户 正 确 地 反 转 其 流动 方向 。 
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2. direction 属性 


语法 : direction : ltr | rtl | inherit 


说 明 : direciton 属性 的 值 中 ，ltr 表示 从 左 到 右 的 阅读 顺序 ，rtl 表示 从 右 到 左 的 阅读 顺序 ; 


则 表示 文本 流 的 值 不 可 继承 。 
下 面 通过 实例 说 明 这 两 个 属性 结合 使 用 的 效果 ， 实 例 代码 如 下 : 


<html> 
<head> 


<title> 文 本 反 排 </title> 


<style> 


h2 {font-family: 黑 体 ; font-size:16pt } 


.text {font-size: 


10pt; text-indent:20pt;direction: rt unicode-bidi: bidi-override;} 


.newtext {font-size:10pt; text-indent:20pt} 


一 > 
</style> 
</head> 
<body> 


<h2> 木 兰 从 军 </h2> 
<p class=text> 北 魏 末 年 ， 柔 然 、 契 丹 等 少数 民族 日 渐 强大 ， 他 们 经 常 派兵 侵扰 中 原 地 区 ， 抢 劫 财物 。 北 魏 朝 


廷 为 了 对 付 他 们 ， 常 常 大 量 征兵 ， 加 强 北部 边境 的 驻防 。 


一 身 好 武艺 。</p> 


inherit 


木兰 从 小 跟着 父亲 读书 写字 。 她 还 喜欢 骑马 射箭 ， 练 得 


<p class=newtext> 有 一 天 ， 衙 门 里 的 差 役 送 来 了 征兵 的 通知 ， 要 征 木 兰 的 父亲 去 当 兵 。 但 父亲 年 纪 老 迈 ， 又 


怎 能 参军 打仗 呢 ? 木兰 没有 哥哥 ， 弟 弟 又 太 小 ， 


她 不 忍心 让 年 老 的 父亲 去 受苦 ， 于 是 决定 女 扮 男装 ， 代 父 从 军 。 


木兰 父母 虽 不 舍得 女儿 出 征 ， 但 又 无 他 法 ， 只 好 同意 她 去 了 。 木 兰 随 着 队伍 ， 到 了 北方 边境 。 她 担心 自己 女 扮 男 
故此 处 处 加 们 小 心 。 和 白天 行军 ， 木 兰 紧 紧 地 跟 上 队伍 ， 从 不 敢 掉队 。 夜 晚 宿营 ， 她 从 来 不 敢 
脱衣 服 。 作 战 的 时 候 ， 她 赁 着 一 身 好 武艺 ， 总 是 冲 杀 在 前 ……</p> 


装 的 秘密 被 人 发 现 ， 


</body> 
</html> 


运行 程序 ， 效 果 如 图 11-25 所 示 。 在 页 面 中 的 第 一 段 文字 ， 


而 实现 了 文本 的 反 排 。 
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图 11-25 设置 文本 的 反 排 
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设置 了 文本 从 右 到 左 的 阅读 顺序 
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11.6 边 距 与 填充 属性 


边 距 属性 用 于 设置 元 素 周围 的 边界 宽度 ， 主 要 包括 上 下 左右 4 个 边界 的 距离 设置 。 填 充 属 性 也 称 
为 补 白 属性 ， 用 于 设置 边框 和 元 素 内 容 之 间 的 间隔 数 ， 同 样 包括 上 、 下 、 左 、 右 4 个 方向 的 填充 值 。 


11.6.1 ”顶端 边 距 一 一 margin-top 


顶端 边 距 属性 也 称 上 边 距 ， 其 用 一 个 指定 的 长 度 或 百分比 值 来 设置 元 素 的 上 边界 。 

语法 : margin-top: 边 距 值 

取 值 范围 : 长 度 值 | 百分比 | auto 

说 明 : 长 度 值 相当 于 设置 顶端 的 绝对 边 距 值 ， 包 括 数字 和 单位 ;百分比 值 则 是 设置 相对 于 上 级 元 
素 的 宽度 的 百分比 ， 人 允许 使 用 负 值 ，auto 是 自动 取 边 距 值 ， 即 取 元 素 的 默认 值 。 

实例 代码 : 


<html> 
<head> 
<title> 设 置顶 端 边 距 </title> 
<style> 
< 
h2 {font-family: 黑 体 ; font-size:16pt; margin-top:15pt} 
Pp {font-size:11pt; text-indent:20pt} 
img { margin-top:25pt} 
一 > 
</style> 
</head> 
<body> 
<h2> 城 市 猎人 </h2> 
<p><img src="pic04.jpg" align="left"> 日 本 著名 写实 漫画 家 北条 司 名作 ， 以 动感 与 质感 完美 融合 的 画 风 , 描绘 
了 一 个 极 富 现代 感 的 侦探 ， 这 部 故事 的 主角 寒 忆 良 【 港 译 “ 和 孟 波 ”】， 是 以 《猫眼 》 中 的 一 个 叫 神谷 的 配角 为 原 
型 的 ， 神 谷 是 一 个 有 正义 感 的 神偷 ， 而 寒 羽 良 则 成 为 一 个 见义勇为 、 武 艺 超群 ， 而 且 足 智 多 谋 的 职业 侦探 ， 这 两 
个 人 有 一 个 共同 的 特点 ， 就 是 十 分 斗 趣 ， 总 爱 在 女孩 子 面前 开 一 些 过 火 的 玩笑 。</p> 
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图 11-26 设置 上 边 距 
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11.6.2 ”其 他 边 距 一 一 margin-bottom、margin-left、margin-right 


底 端 边 距 用 于 设置 元 素 下 方 的 边 距 值 ; 左 侧 边 距 和 右 侧 边 距 则 分 别 用 于 设置 元 素 左右 两 侧 的 边 距 
值 。 其 语法 和 使 用 方法 同 顶 端 边 距 类 似 ， 下 面 用 一 个 实例 说 明 底 端 边 距 、 堪 侧 边 距 和 右 侧 边 距 的 效果 。 
实例 代码 : 


<html> 
<head> 
<title> 设 置 其 他 边 距 属性 </title> 
<style> 
到 
h2 {font-family: 黑 体 ; font-size:16pt} 
p {font-size:11pt; text-indent:20pt} 
img { margin-top:10pt; margin-bottom:10pt; margin-left:25pt; margin-right:25pt} 


一 > 
</style> 
</head> 
<body> 

<h2> 城 市 猎人 </h2> 

<p><img src="pic04.jpg" align="left"> 日 本 著名 写实 漫画 家 北条 司 名 作 ， 以 动感 与 质感 完美 融合 的 画 风 , 描绘 
了 一 个 极 富 现代 感 的 侦探 ， 这 部 故事 的 主角 寒 羽 良 【 港 译 “ 和 孟 波 ”】， 是 以 《猫眼 》 中 的 一 个 叫 神谷 的 配角 为 原 
型 的 ， 神 谷 是 一 个 有 正义 感 的 神偷 ， 而 寒 羽 良 则 成 为 一 个 见义勇为 、 武 艺 超群 ， 而 且 足 智 多 谋 的 职业 侦探 ， 这 两 
个 人 有 一 个 共同 的 特点 ， 就 是 十 分 斗 趣 ， 总 爱 在 女孩 子 面前 开 一 些 过 火 的 玩笑 。</p> 


</body> 
</html> 
运行 程序 ， 效 果 如 图 11-27 所 示 。 
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图 11-27 设置 图 像 的 上 、 下 、 左 、 右 边 距 


11.6.3 ”复合 属性 : 边 距 一 一 margin 


与 其 他 属性 类 似 ， 边 距 属性 是 用 于 对 4 个 边 距 设置 的 略 写 。 

语法 : margin: 长 度 值 | 百分比 | auto 

说 明 : 在 这 里 ，margin 的 值 可 以 取 1 到 4 个 ， 如 果 只 设置 了 1 个 值 ， 则 应 用 于 所 有 的 4 个 边界 ; 
如 果 设 置 了 两 个 或 3 个 值 ， 则 省 略 的 值 与 对 边 相等 ， 如 果 设 置 了 4 个 值 ， 则 按照 上 、 右 、 下 、 左 的 顺 
序 分 别 对 应 其 边 距 。 
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实例 代码 : 


<html> 
<head> 
<title> 设 置 边 距 属 性 </title> 
<style> 
<I-- 
h2 {font-family: 黑 体 ; font-size:16pt} 
Pp {font-size:11pt; text-indent:20pt} 
img { margin: 8pt 30pt 10pt} 
一 > 
</style> 
</head> 
<body> 
<h2> 城 市 猎人 </h2> 
<p><img src="pic04.jpg" align="left"> 日 本 著名 写实 漫画 家 北条 司 名 作 ， 以 动感 与 质感 完美 融合 的 画 风 , 描绘 
了 一 个 极 富 现代 感 的 侦探 ， 这 部 故事 的 主角 寒 忆 良 【 港 译 “和 孟 波 ”】， 是 以 《猫眼 》 中 的 一 个 叫 神谷 的 配角 为 原 
型 的 ， 神 谷 是 一 个 有 正义 感 的 神偷 ， 而 寒 羽 良 则 成 为 一 个 见义勇为 、 武 艺 超群 ， 而 且 足 智 多 谋 的 职业 侦探 ， 这 两 
个 人 有 一 个 共同 的 特点 ， 就 是 十 分 斗 趣 ， 总 爱 在 女孩 子 面前 开 一 些 过 火 的 玩笑 。</p> 
</body> 
</html> 


运行 程序 ， 效 果 如 图 11-28 所 示 。 其 中 上 边 距 是 8pt， 下 边 距 是 10pt， 右 边 距 是 30pt， 左 边 距 未 设 
采用 与 右边 距 相等 的 值 ， 即 同样 设置 为 30pt。 
| 


网 


到 | 
下 Es TT ms | 


图 11-28 设置 边 距 属性 


11.6.4 ”顶端 填充 一 一 padding-top 


顶端 填充 属性 也 称 为 上 补 白 ， 即 上 边框 和 选择 符 内 容 之 间 的 间隔 数 。 
语法 : padding-top: 间隔 值 

说 明 : 间隔 值 可 以 设置 为 长 度 值 或 百分比 。 其 中 ， 百 分 比 不 能 使 用 负 值 。 
在 前 面 实例 的 基础 上 设置 body 的 上 补 白 值 ， 其 实例 代码 如 下 : 

<html> 

<head> 

<title> 设 置顶 端 填充 属性 </title> 


<style> 


第 11 章 CSS 样式 表 "231。 


< 
Body{padding-top:26pt} 
h2 {font-family: 黑 体 ; font-size:16pt} 
p {font-size:11pt; text-indent:20pt} 
一 > 
</style> 
</head> 
<body> 
<h2> 城 市 猎人 </h2> 
<p><img src="pic04.jpg" align="left"> 日 本 著名 写实 漫画 家 北条 司 名 作 ， 以 动感 与 质感 完美 融合 的 画 风 , 描绘 
了 一 个 极 富 现代 感 的 侦探 ， 这 部 故事 的 主角 寒 羽 良 【 港 译 “ 和 孟 波 ”】， 是 以 《猫眼 》 中 的 一 个 叫 神谷 的 配角 为 原 
型 的 ， 神 谷 是 一 个 有 正义 感 的 神偷 ， 而 寒 羽 良 则 成 为 一 个 见义勇为 、 武 艺 超群 ， 而 且 足 智 多 谋 的 职业 侦探 ， 这 两 
个 人 有 一 个 共同 的 特点 ， 就 是 十 分 斗 趣 ， 总 爱 在 女孩 子 面前 开 一 些 过 火 的 玩笑 。</p> 
</body> 
</html> 


运行 程序 ， 效 果 如 图 11-29 所 示 。 


El| 
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城市 猎人 


图 11-29 设置 上 补 白 
11.6.5 ”其 他 填充 一 一 padding-bottom、padding-right、padding-left 


其 他 填充 属性 是 指 底 端 、 左 右 两 侧 的 补 白 值 ， 其 语法 和 使 用 方法 同 项 端 填充 类 似 ， 下 面 用 一 个 实 
例 说 明 其 他 填充 的 效果 。 


<html> 
<head> 
<title> 设 置 其 他 填充 属性 </title> 
<style> 
三 = 
Body{padding-top:15pt; padding-bottom:13pt; padding-right:30pt padding-left:20pt} 
h2 {font-family: 黑 体 ; font-size:16pt} 
p {font-size:11pt; text-indent:20pt} 
一 > 
</style> 
</head> 
<body> 
<h2> 城 市 猎人 </h2> 
<p><img src="pic04.jpg" align="left"> 日 本 著名 写实 漫画 家 北条 司 名 作 ， 以 动感 与 质感 完美 融合 的 画 风 , 描绘 
了 一 个 极 富 现代 感 的 侦探 ， 这 部 故事 的 主角 寒 羽 良 【 港 译 “ 和 孟 波 ”】， 是 以 《猫眼 》 中 的 一 个 叫 神谷 的 配角 为 原 
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型 的 ， 神 谷 是 一 个 有 正义 感 的 神偷 ， 而 寒 羽 良 则 成 为 一 个 见义勇为 、 武 艺 超群 ， 而 且 足 智 多 谋 的 职业 侦探 ， 这 两 
个 人 有 一 个 共同 的 特点 ， 就 是 十 分 斗 趣 ， 总 爱 在 女孩 子 面前 开 一 些 过 火 的 玩笑 。</p> 

</body> 

</html> 


运行 程序 ， 效 果 如 图 11-30 所 示 。 


图 11-30 设置 上 、 下 、 左 、 右 补 白 


11.6.6 ”复合 属性 ， 填 充 一 一 padding 


与 其 他 复合 属性 特别 是 边 距 属性 margin 的 使 用 方式 和 用 法 类 似 ， 下 面 通过 一 个 实例 来 说 明 填 充 属 
性 的 效果 。 

语法 : margin: 长 度 值 | 百分比 

实例 代码 : 

<html> 


<head> 
<title> 设 置 填充 属性 </title> 


Body{padding: 18pt 35pt 12pt} 

h2 {font-family: 黑 体 ; font-size:16pt} 

p {font-size:11pt; text-indent:20pt} 
一 > 
</style> 
</head> 
<body> 

<h2> 城 市 猎人 </h2> 

<p><img src="pic04.jpg”align="left"> 日 本 著名 写实 漫画 全 er 
家 北条 司 名 作 ， 以 动感 与 质感 完美 融合 的 画 风 , 描绘 了 一 个 极 富 | 23 a ee 2 ne Se 
现代 感 的 侦探 ， 这 部 故事 的 主角 寒 羽 良 【 港 译 “ 孟 波 ”】， 是 以 lnm | 
《猫眼 》 中 的 一 个 叫 神谷 的 配角 为 原型 的 , 神谷 是 一 个 有 正义 感 
的 神偷 ， 而 寒 羽 良 则 成 为 一 个 见义勇为 、 武 艺 超群 ,而且 足 智 多 
谋 的 职业 侦探 , 这 两 个 人 有 一 个 共同 的 特点 ， 就 是 十 分 斗 趣 , 总 
爱 在 女孩 子 面前 开 一 些 过 火 的 玩笑 。</p> 
</body> 
</html> 


Ga 


运行 代码 ， 效 果 如 图 11-31 所 示 。 图 11.31 设置 填充 属性 
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11.7 边框 属性 


边框 属性 控制 元 素 所 占用 空间 的 边缘 。 例 如 ， 可 将 文本 格式 和 定位 属性 应 用 到 <DIV> 元 素 ， 然 
后 应 用 边框 属性 以 创建 元 素 周围 的 框 ， 并 将 其 设置 为 远离 主要 文本 。 在 边框 属性 中 ， 可 以 设置 边框 宽 
度 、 边 框 样式 、 边 框 颜色 等 。 而 每 一 类 都 包含 5 个 属性 ， 例 如 边框 宽度 其 实 具 体 可 以 分 成 上 边框 宽度 
border-top-width 、 右 边框 宽度 border-right-width 、 下 边框 宽度 border-bottom-width 、 左 边框 宽度 
border-left-width 以 及 宽度 属性 border-width 等 5 个 具体 的 属性 。 
边框 属性 中 包含 的 具体 属性 见 表 11-2。 


表 11-2 ”边框 属性 列表 


属 性 含义 
border-top-width 设置 上 边框 的 宽度 值 
border-right-width 设置 右边 框 的 宽度 值 
border-bottom-width 设置 下 边框 的 宽度 值 
border-left-width 设置 左边 框 的 宽度 值 
border-width 复合 属性 ， 是 设置 边框 宽度 值 的 4 个 属性 的 略 写 
border-top-color 设置 上 边框 的 颜色 
border-right-color 设置 右边 框 的 颜色 
border-bottom-color 设置 下 边框 的 颜色 
border-left-color 设置 左边 框 的 颜色 
border-color 复合 属性 ， 是 设置 边框 颜色 的 4 个 属性 的 略 写 
border-top-style 设置 上 边框 的 样式 
border-right-style 设置 右边 框 的 样式 
border-bottom-style 设置 下 边框 的 样式 
border-left-style 设置 左边 框 的 样式 
border-style 复合 属性 ， 是 设置 边框 样式 的 4 个 属性 的 略 写 
boder-top, 复合 属性 ， 可 以 同时 设置 上 边框 的 宽度 、 颜 色 和 样式 
boder-right 复合 属性 ， 设 置 右 边框 的 宽度 、 颜 色 和 样式 
boder-bottom 复合 属性 ， 设 置 下 边框 的 宽度 、 颜 色 和 样式 
boder-left 复合 属性 ， 设 置 左边 框 的 宽度 、 颜 色 和 样式 
boder 复合 属性 ， 相 当 于 对 上 面 所 有 属性 的 集合 


由 于 边框 属性 的 设置 与 边 距 、 填 充 属 性 类 似 ， 为 了 便于 理解 和 对 比 ， 每 一 种 属性 的 上 、 下 、 左 、 


右 4 个 属性 将 会 在 一 起 讲解 。 


11.7.1 ”边框 样 于 


border-style 


边框 样式 属性 用 以 定义 边框 的 风格 呈现 式样 ， 这 个 属性 必须 用 于 指定 可 见 的 边框 。 它 可 以 对 元 素 
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分 别 设置 上 边框 样式 (border-top-style )、 下 边框 样式 (border-bottom-style)、 左 边框 样式 (border-left-style) 
和 右边 框 样式 (border-right-style) 4 个 属性 ， 也 可 以 使 用 复合 属性 边框 样式 (border-style) 对 边框 样式 
的 设置 进行 略 写 。 
语法 : border-style: 样式 值 
border-top-style: 样式 值 
border-right-style: 样式 值 
border-bottom-style: 样式 值 
border-left-style: 样式 值 
说 明 : 样式 可 以 取 的 值 共 有 9 种 ， 见 表 11-3。 


表 11-3 ”边框 样式 取 值 含义 


取 值 此， 党 
none 不 显示 边框 ， 为 默认 属性 值 
dotted 点 线 
dashed 虚线 ， 也 称 为 短线 
solid 实 线 
double 双 实 线 
groove 边框 带 有 立体 感 的 沟 模 
ridge 边框 成 硝 形 
inset 使 整个 方 框 凹陷 ， 即 在 边框 内 媒 入 一 个 立体 边框 
outset 使 整个 方 框 凸 起 ， 即 在 边框 外 嵌入 一 个 立体 边框 


各 注意 : 虽然 这 几 个 属性 的 取 值 范围 相同 ， 但 是 上 、 下 、 左 、 右 4 个 具体 的 边框 样式 属性 都 是 设置 一 
个 值 ， 而 复合 属性 border-style 可 以 设置 1 到 4 个 值 来 设置 元 素 的 边框 样式 ， 而 其 不 同 个 数 的 
取 值 其 含义 与 复合 属性 边 距 margin、 填 充 padding 类 似 。 


为 了 使 读者 在 学 习 的 过 程 中 更 加 清晰 地 掌握 这 几 种 属性 ， 下 面 在 同一 个 实例 中 设置 这 5 个 属性 的 
值 来 加 以 对 比 说 明 。 
实例 代码 : 


<html> 

<head> 

<title> 设 置 边 框 样式 </title> 

<style> 

<I-- 

h2{ 

font-family: 黑 体 ; 
font-size:16pt; 
border-style: inset 


font-size:11pt; 
text-indent:20pt; 
border-top-style: dotted; 
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border-right-style: dashed; 
border-bottom-style: double; 
border-left-style: solid 
} 
一 > 
</style> 
</head> 
<body> 
<h2> 模 拟人 生 2: 大 学 </h2> 
<p> 模 拟人 生 2 却 将 游戏 内 容 瞄 准 了 丰富 多 彩 的 大 学 生活 。 在 游戏 中 玩家 可 以 完全 体验 到 大 学 四 年 的 校园 生 
活 ， 虽 然 美国 和 我 们 的 校园 生活 和 学 习 方 式 略 有 不 同 ， 不 过 玩家 依然 可 以 感受 到 考试 带 来 的 欢喜 与 悲伤 ， 打 工 、 
参加 社团 带 来 的 成 就 或 失落 ， 室友 或 导师 帮 你 建立 的 自信 和 愤怒。 一 切 梦想 都 从 大 学 开始 ， 无 论 是 回忆 还 是 期 待 。 
</p> 
<center><img src="pic05.jpg"></center> 
</body> 
</html> 


运行 程序 ， 效 果 如 图 11-32 所 示 。 其 中 <h2> 标 记 内 的 文字 边框 凹陷 ， 而 段落 文字 的 4 个 方向 的 边 
框 样式 则 各 有 不 同 。 


图 11-32 设置 边框 样式 


11.7.2 ”边框 宽度 一 一 border-width 


边框 宽度 用 于 设置 元 素 边 框 的 宽度 值 ， 其 语法 和 用 法 都 与 边框 样式 的 设置 类 似 。 
语法 : border-width: 宽度 值 
border-top-width: 宽度 值 
border-right-width: 宽度 值 
border-bottom-width: 宽度 值 
border-left-width: 宽度 值 
取 值 范围 : thin | medium | thick | < 长 度 > 
说 明 : 在 该 语法 中 ， 这 几 种 属性 的 取 值 范 围 相 同 。 其 中 ，medium 是 默认 宽度 ; thin 表示 小 于 默认 
宽度 ， 称 为 细 边 框 ; thick 大 于 默认 宽度 ， 称 为 粗 边框 ， 长 度 则 是 由 数字 和 单位 组 成 的 长 度 值 ， 不 可 为 
负 值 。 
下 面 通过 实例 说 明 如 何 设置 元 素 的 边框 宽度 ， 实 例 代 码 如 下 : 
<html> 
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<head> 
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<title> 设 置 边框 宽度 </title> 


<style> 
-~ 


h2{ 


} 
一 > 
</style> 
</head> 
<body> 


font-family: 黑 体 ; 

font-size:16pt; 

border-style: inset; 
border-width: 1px 5px 10px 3px 


font-size:11pt; 

text-indent:20pt; 

六 定义 了 段落 文字 的 边框 样式 */ 
border-top-style: dotted; 
border-right-style: dashed; 
border-bottom-style: double; 
border-left-style: solid; 

上 定义 了 段落 文字 的 边框 宽度 "/ 
border-top-width: 8px; 
border-right-width: 1px; 
border-bottom-width: 3px; 
border-left-width: 4px 


<h2> 模 拟人 生 2: 大 学 </h2> 


<p> 模 拟人 生 2 却 将 游戏 内 容 瞄 准 了 丰富 多 彩 的 大 学 生活 。 在 游戏 中 玩家 可 以 完全 体验 到 大 学 四 年 的 校园 生 
活 ， 虽 然 美 国 和 我 们 的 校园 生活 和 学 习 方式 略 有 不 同 ， 不 过 玩家 依然 可 以 感受 到 考试 带 来 的 欢喜 与 悲伤 ， 打 工 、 
参加 社团 带 来 的 成 就 或 失落 ; 室友 或 导师 帮 你 建立 的 自信 和 愤怒 。 一 切 梦想 都 从 大 学 开始 ， 无 论 是 回忆 还 是 期 待 。 
</p> 


<center><img src="pic05.jpg"></center> 


</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 如 图 11-33 所 示 的 效果 。 
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图 11-33 ”设置 边框 宽度 
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11.7.3 ”边框 颜色 一 一 border-color 


边框 颜色 属性 用 于 定义 边框 的 颜色 ， 可 以 用 16 种 颜色 的 关键 字 或 RGB 值 来 设置 。 可 以 对 4 个 边 
框 分 别 设置 颜色 ， 也 可 以 使 用 复合 属性 border-color 进行 统一 设置 。 对 于 使 用 边框 颜色 border-color 属 
性 ， 如 果 指 定 1 种 颜色 ， 则 表示 4 个 边框 是 一 种 颜色 ;指定 2 种 颜色 ， 则 定义 顺序 为 上 下 、 左 右 ; 指 
定 3 种 颜色 ,顺序 为 上 、 左 右 、 下 ; 指定 4 种 颜色 ,顺序 则 为 上 、 右 、 下 、 左 。 

下 面 通过 实例 说 明 边框 颜色 的 设置 ， 实 例 代码 如 下 : 

<html> 

<head> 

<title> 设 置 边框 颜色 </title> 


<style> 
<!-- 


h2{ 
font-family: 黑 体 ; 
font-size:16pt; 
border-style: inset; 
border-width: 1px 5px 10px 3px; 
border-color green red 


font-size:11pt; 

text-indent:20pt; 
border-top-style: dotted; 
border-right-style: dashed; 
border-bottom-style: double; 
border-left-style: solid; 
border-top-width: 8px; 
border-right-width: 1px; 
border-bottom-width: 3px; 
border-left-width: 4px; 

人 * 定义 了 段落 文字 的 边框 宽度 */ 
border-top-color: #D00000; 
border-right-color: #00F; 
border-bottom-color: #FFOOFF:; 
border-left-color: maroon 


} 


</style> 
</head> 
<body> 
<h2> 模 拟人 生 2: 大 学 </h2> 
<p> 模 拟人 生 2 却 将 游戏 内 容 瞄 准 了 丰富 多 彩 的 大 学 生活 。 在 游戏 中 玩家 可 以 完全 体验 到 大 学 四 年 的 校园 生 
活 ， 虽 然 美 国 和 我 们 的 校园 生活 和 学 习 方式 略 有 不 同 ， 不 过 玩家 依然 可 以 感受 到 考试 带 来 的 欢喜 与 悲伤 ， 打 工 、 
参加 社团 带 来 的 成 就 或 失落 ; 室友 或 导师 帮 你 建立 的 自信 和 愤怒 。 一 切 梦想 都 从 大 学 开始 ， 无 论 是 回忆 还 是 期 待 。 
</p> 
<center><img src="pic05.jpg"></center> 
</body> 
</html> 
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运行 这 段 代 码 ， 可 以 看 到 如 图 11-34 所 示 的 效果 。 


一 gm 


图 11-34 ”设置 边框 颜色 
11.7.4 ”边框 属性 一 一 border 


边框 属性 用 来 设置 一 个 元 素 的 边框 宽度 、 样 式 和 颜色 。 边框 属 性 只 能 设置 4 种 边框 ， 它 所 包含 的 5 
种 属性 ( 即 上 、 下 、 左 、 右 4 个 边框 属性 和 一 个 总 的 边框 属性 ) 都 是 复合 属性 ， 在 使 用 中 只 能 给 出 一 
组 边框 宽度 和 样式 。 
border: < 边框 宽度 > < 边框 样式 > || < 颜色 > 
border-top: < 上 边框 宽度 > < 上 边框 样式 > || < 颜色 > 
border-right: < 右边 框 宽度 > || < 右边 框 样式 > | < 颜色 > 
border-bottom: < 下 边框 宽度 > | < 下 边框 样式 > || < 颜色 > 
border-left: < 左边 框 宽度 > || < 左边 框 样式 > || < 颜色 > 
说 明 : 在 这 些 复合 属性 中 ， 边 框 属性 border 只 能 同时 设置 4 种 边框 ， 也 只 能 给 出 一 组 边框 的 宽度 
和 样式 。 而 其 他 边框 属性 (如 上 边框 属性 border-top) 只 能 给 出 某 一 个 边框 的 属性 ， 包 括 宽 度 、 样 式 和 
颜色 。 
实例 代码 : 
<html> 
<head> 
<title> 设 置 边框 属性 </title> 
<style> 
<I-- 
h21{ 
font-family: 黑 体 ; 
font-size:16pt; 
border:5px dashed olive 


font-size:11pt; 
text-indent:20pt; 

上 定义 段落 文字 的 边框 属性 */ 
border-top:3px dotted #00F:; 
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border-right:5px solid red; 
border-bottom:1px ridge #FFOOFF:; 
border-left:4px solid red 
} 
一 > 
</style> 
</head> 
<body> 
<h2> 模 拟人 生 2: 大 学 </h2> 
<p> 模 拟人 生 2 却 将 游戏 内 容 瞄 准 了 丰富 多 彩 的 大 学 生活 。 在 游戏 中 玩家 可 以 完全 体验 到 大 学 四 年 的 校园 生 
活 ， 虽 然 美国 和 我 们 的 校园 生活 和 学 习 方 式 略 有 不 同 ， 不 过 玩家 依然 可 以 感受 到 考试 带 来 的 欢喜 与 悲伤 ， 打工 、 
参加 社团 带 来 的 成 就 或 失落 ;室友 或 导师 帮 你 建立 的 自信 和 愤怒 。 一 切 梦想 都 从 大 学 开始 ， 无 论 是 回忆 还 是 期 待 。 
</p> 
<center><img src="pic05.jpg"></center> 
</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 如 图 11-35 所 示 的 效果 。 


Wm TA She 
EE EE CETL 


图 11-35 设置 边框 属性 
11.8 定位 及 尺寸 属性 


定位 属性 控制 网 页 所 显示 的 整个 元 素 的 位 置 。 例 如 ， 如 果 一 个 层 元 素 〈<div> 标 记 ) 既 包 含 文本 又 
包含 图 片 ， 则 可 用 定位 属性 控制 整个 层 元 素 的 位 置 。 可 设置 元 素 放置 在 页 面 中 的 绝对 位 置 ， 也 可 设置 
为 相对 于 其 他 元 素 的 位 置 。 定 位 属性 主要 通过 相对 定位 和 绝对 定位 两 种 方式 定位 。 相 对 定位 是 指 允 许 
元 素 在 相对 于 文档 布局 的 原始 位 置 上 进行 偏 移 ， 而 绝对 定位 允许 元 素 与 原始 的 文档 布局 分 离 且 任意 定 
位 。 定 位 属性 主要 包括 定位 方式 、 层 登 顺 序 等 。 

尺寸 属性 主要 包括 长 度 和 宽度 属性 ， 用 于 确定 元 素 的 大 小 。 下 面 对 这 些 属 性 进行 具体 介绍 。 


11.8.1 定位 方式 一 一 position 


定位 方式 属性 用 于 设 定 浏览 器 应 如 何 来 定位 HTML 元 素 。 


语法 : position : static | absolute | fixed | relative 
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说 明 : 其 中 ，static 表示 无 特殊 定位 ， 对 象 遵循 HTML 定位 规则 ， 是 默认 取 值 ; absolute 表示 采用 
绝对 定位 ， 需 要 同时 使 用 left、right、top、bottom 等 属性 进行 绝对 定位 ， 而 其 层 登 通过 z-index 属性 定 
义 ， 此 时 对 象 不 具有 边 距 ， 但 仍 有 补 白 和 边框 ; fixed 表示 当 页 面 滚动 时 ， 元 素 保持 在 浏览 器 视 区 内 ， 
其 行为 类 似 absolute， 在 IE5.5 中 不 支持 该 属性 ;relative 表示 采用 相对 定位 ， 对 和 象 不 可 层 车 ,但 将 依据 
left、right、top、bottom 等 属性 设置 在 页 面 中 的 偏 移 位 置 。 


各 注意 : 当 使 用 absolute ( 绝对 ) 定位 元 素 时 ， 该 元 素 就 被 当 作 一 个 矩形 覆盖 物 来 格式 化 ， 格 式 化 后 
的 矩形 区 域 就 变 成 了 一 个 可 以 放置 其 他 HTML 元 素 的 容器 , 这 个 容器 也 就 是 层 元 素 ， 它 可 以 
凌驾 于 HTML 文档 的 布局 之 上 , 区 域 下 面 的 文字 和 图 形 永远 也 无 法 环绕 和 透 过 该 容器 显示 出 来 。 


11.8.2 ”元 素 位 置 一 一 top、right、bottom、left 


元 素 位 置 属性 与 定位 方式 共同 设置 元 素 的 具体 位 置 。 
top : auto | 长 度 值 | 百分比 
right : auto | 长 度 值 | 百分比 
bottom : auto | 长 度 值 | 百分比 
left : auto | 长 度 值 | 百分比 
说 明 : 这 4 个 属性 分 别 表示 对 象 与 其 最 近 一 个 定位 的 父 对 象 顶部 、 右 侧 、 底 部 和 左 侧 的 相对 位 置 ， 
其 中 ，auto 表示 采用 默认 值 ， 长 度 值 则 需要 包含 数字 和 单位 ， 也 可 以 使 用 百分数 进行 设置 。 
下 面 通 过 一 个 实例 同时 设置 定位 方式 和 元 素 位 置 属性 ， 代 码 如 下 : 


<html> 
<head> 
<title> 对 元 素 进行 定位 </title> 
<style> 
h2{ 
font-family: 黑 体 ; 
font-size:16pt 


.place { 
font-size:11pt; 
color:#CC0000; 
text-indent:20pt; 
position: absolute; 
top: 70pt; 
left: 30pt 

} 
一 > 
</style> 
</head> 
<body> 
<h2> 晴 蜂 的 眼泪 </h2> 
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<center><img src="pic06.jpg"></center> 

<div class=place> 男 孩 跟 女 孩 是 一 对 热恋 中 的 恋人 , 很 不 幸 的 是 女孩 在 一 次 体操 比赛 中 倒 下 了 ， 医 生 确 诊 为 : 
和 白血病。 男孩 每 天 都 陪 在 女孩 的 病床 前 ， 看 着 女孩 那 苍白 惟 迟 的 脸 ， 男 孩 哭 了 。 哭 的 很 伤心 ， 男 孩 每 天 晚上 都 在 
女孩 地 病床 前 ， 为 女孩 折 上 几 只 千 纸 鹤 ， 就 这 样 过 了 几 个 月 。 女 孩 已 经 畜 龙 一 息 了 ， 一 直 展 迷 着 ， 男 孩 还 是 重复 
地 为 女孩 折 千 纸 鹤 ， 男 孩 折 到 1000 只 整 的 时 候 ， 病 房 被 照 亮 了 ， 天 使 忽然 出 现在 男孩 的 面前 ， 男 孩 被 吓 呆 了 ， 揉 
了 揉 哭 肿 了 的 眼睛 ， 握 着 女孩 的 手 ， 哭 着 对 天 使 说 ， 求 你 救 救 这 个 善良 的 女孩 吧 ， 天 使 对 男孩 说 ， 只 要 你 愿意 ， 
为 女孩 做 3 年 晴 星 ， 女 孩 就 会 慢 慢 地 好 起 来 ， 男 孩 毫 不 犹 更 地 答应 了 ， 天 使 消失 了 ， 同 时 男孩 也 变 成 了 一 只 晴 星 。 
后 来 es </div> 


上 入 E) 二 看 履 守 向 工具 [TD 再 助 D) 
司 - 国 国 风 用时 克 WR 回合 -党 习 - 


只 要 你 愿意， 为 安防 做 
天 亿 消 夫 了 ， PH 


图 11-36 定位 元 素 的 效果 
11.8.3” 层 从 顺序 一 一 z-index 


层 辣 顺序 属性 用 于 设 定 层 的 先后 顺序 和 获 盖 关系 , z-index 值 高 的 层 履 盖 z-index 值 低 的 层 。 一 般 情 
况 下 ，z-index 值 为 1， 表 示 该 层 位 于 最 下 层 。 

语法 : z-index: auto | 数字 

说 明 : 当 z-index 取 值 为 auto 时， 表示 它 遵 循 其 父 对 象 的 定位 属性 ;: 如 果 设置 为 数字 ， 必 须 是 无 单 
位 的 整数 值 ， 可 以 取 负 值 ， 但 一 般 情 况 下 都 取 正 整数 。 

实例 代码 : 


<html> 
<head> 
<title> 设 置 层 释 效 果 </title> 
<style> 
<I-- 
h2{ 
font-family: 黑 体 ; 
font-size:16pt 
} 
-lowdiv { 
position: absolute; 
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top: 55pt; 
left: 230pt; 
z-index:1 
} 
.place { 
font-size:11pt; 
color:#CC0000; 
text-indent:20pt; 
position: absolute; 
top: 70pt; 
left: 30pt; 
z-index:2 
} 
一 > 
</style> 
</head> 
<body> 
<h2> 晴 旺 的 眼泪 </h2> 
<div class=lowdiv><img src="pic06.jpg"></div> 
<div class=place> 
男孩 跟 女 孩 是 一 对 热恋 中 的 恋人 ， 很 不 幸 的 是 女孩 在 一 次 体操 比赛 中 倒 下 了 ， 医 生 确 诊 为 : 白血病 。 男 
孩 每 天 都 陪 在 女孩 的 病床 前 ， 看 着 女孩 那 苍白 惟 迟 的 脸 ， 男 孩 哭 了 。 哭 的 很 伤心 ， 男 孩 每 天 晚上 都 在 女孩 地 病床 
前 ， 为 女孩 折 上 几 只 千 纸 鹤 ， 就 这 样 过 了 几 个 月 。 女 孩 已 经 寿 达 一 息 了 ， 一 直 展 迷 着 ， 男 孩 还 是 重复 地 为 女孩 折 
千 纸 鹤 ， 男 孩 折 到 1000 只 整 的 时 候 ， 病 房 被 照 亮 了 ， 天 使 忽然 出 现在 男孩 的 面前 ， 男 孩 被 吓 呆 了 ， 揉 了 揉 哭 肿 了 
的 眼睛 ， 握 着 女孩 的 手 ， 哭 着 对 天 使 说 ， 求 你 救 救 这 个 善良 的 女孩 吧 ， 天 使 对 男孩 说 ， 只 要 你 愿意 ， 为 女孩 做 3 
年 晴 星 ， 女 孩 就 会 慢 慢 地 好 起 来 ， 男 孩 毫 不 犹 瑰 地 答应 了 ， 天 使 消失 了 ， 同 时 男孩 也 变 成 了 一 只 晴 贤 。 后 来 …… 
<br> 
<img src="pic06.jpg" width="110" align="right"> 
</div> 
</body> 
</html> 


运行 代码 ， 效 果 如 图 11-37 所 示 。 


、 汇丰 生 的 弟 女 正在 二 次 条 斥 比 容 中 便 下 了 ， 医 笋 只 
， 振 考 去 取 守 和 扬 化 亿 的 从 ， 呈 该 条 二 
为 妇 夸 新 十 用 .只 子 猎 襄 ， 就 这 


图 11-37 ”两 个 层 的 层 又 顺序 
从 实现 的 效果 可 以 看 出 : 应 用 了 样式 lowdiv 类 的 层 (简称 lowdiv 层 ) 的 z-index 属性 为 1， 应 用 
了 样式 place 类 的 层 〈 简 称 place 层 ) 的 z-index 属性 为 2，lowdiv 层 的 内 容 〈 即 图 像 ) 被 place 层 的 内 
容 〈 包 括 文字 和 小 的 图 像 )》 所 遮盖 ， 这 就 证 明了 z-index 属性 值 越 高 ， 它 的 层 就 越 靠 上 。 
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11.8.4 浮动 属性 一 一 float 


浮动 属性 也 称 漂浮 属性 ,用 于 将 文字 设置 在 某 个 元 素 的 周围 。 它 的 功能 相当 于 img 元 素 的 align=left 
和 align=right， 但 是 float 能 应 用 于 所 有 的 元 素 ， 而 不 仅 是 图 像 和 表格 。 
语法 : float: left | right | none 
说 明 : 在 该 语法 中 ，left 表示 文字 浮 在 元 素 左 侧 ; right 则 是 浮 在 元 素 右 侧 ; none 属于 默认 值 ， 表 
示 对 象 不 浮动 。 
实例 代码 : 
<html> 
<head> 
<title> 设 置 浮动 属性 </title> 
<style> 
三 - 
h21{ 
font-family: 黑 体 ; 
font-size:16pt 
} 
.place { 
font-size:11pt; 
color:#CC0000; 


} 
img { float: right } 
一 > 
</style> 
</head> 
<body> 
<h2> 晴 蜂 的 眼泪 </h2> 
<img src="pic06.jpg" width="130"> 
<div class=place> 
男孩 跟 女 孩 是 一 对 热恋 中 的 恋人 ， 很 不 幸 的 是 女孩 在 一 次 体操 比赛 中 倒 下 了 ， 医 生 确 诊 为 : 白血病 。 男 
孩 每 天 都 陪 在 女孩 的 病床 前 ， 看 着 女孩 那 苍白 惟 以 的 脸 ， 男 孩 活 了。 和 器 的 很 伤心 ， 男 孩 每 天 晚上 都 在 女孩 的 病床 
前 ， 为 女孩 折 上 几 只 干 纸 鹤 ， 就 这 样 过 了 几 个 月 。 女 孩 已 经 寿 矿 一 息 了 ， 一 直 昏 迷 着 ， 男 孩 还 是 重复 地 为 女孩 折 
千 纸 鹤 ， 男 孩 折 到 1000 只 整 的 时 候 ， 病 房 被 照 亮 了 ， 天 使 忽然 出 现在 男孩 的 面前 ， 男 孩 被 吓 呆 了 ， 揉 了 揉 哭 肿 了 
的 眼睛 ， 握 着 女孩 的 手 ， 哭 着 对 天 使 说 ， 求 你 救 救 这 个 善良 的 女孩 吧 ， 天 使 对 男孩 说 ， 只 要 你 愿意 ， 为 女孩 做 3 
年 晴 星 ， 女 孩 就 会 慢 慢 地 好 起 来 ， 男 孩 毫 不 犹 瑰 地 答应 了 ， 天 使 消失 了 ， 同 时 男孩 也 变 成 了 一 只 晴 蝇 。 后 来 …… 
</div> 
</body> 
</html> 


运行 代码 ， 效 果 如 图 11-38 所 示 。 


图 11-38 设置 浮动 属性 
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11.8.5 ”清除 属性 一 一 clear 


清除 属性 指定 一 个 元 素 是 否 允 许 有 其 他 元 素 漂浮 在 它 的 周围 。 

语法 : clear: none | left | right | both 

说 明 : none 表示 允许 两 边 都 可 以 有 浮动 对 象 ， left 表示 不 允许 左边 有 浮动 对 象 ，right 表示 不 允许 
右边 有 浮动 对 象 ，both 则 表示 完全 不 允许 有 浮动 对 象 。 

实例 代码 : 


<html> 

<head> 

<title> 清 除 属性 的 效果 </title> 
<style> 

本 = 

h2{ 
font-family: 黑 体 ; 
font-size:16pt 

} 

.place { 
font-size:11pt; 
color:#CC0000; 
clear: right 


} 
img { float: right } 


一 > 
</style> 
</head> 
<body> 

<h2> 晴 蜂 的 眼泪 </h2> 

<img src="pic06.jpg" width="130"> 

<div class=place> 

男孩 跟 女 孩 是 一 对 热恋 中 的 恋人 ， 很 不 幸 的 是 女孩 在 一 次 体操 比赛 中 倒 下 了 ， 医 生 确诊 为 : 白血病 。 男 

孩 每 天 都 陪 在 女孩 的 病床 前 ， 看 着 女孩 那 苍白 惟 以 的 脸 ， 男 孩 洗 了。 器 的 很 伤心 ， 男 孩 每 天 晚上 都 在 女孩 的 病床 
前 ， 为 女孩 折 上 几 只 干 纸 鹤 ， 就 这 样 过 了 几 个 月 。 女 孩 已 经 寿 桩 一 息 了 ， 一 直 氏 迷 着 ， 男 孩 还 是 重复 地 为 女孩 折 
千 纸 鹤 ， 男 孩 折 到 1000 只 整 的 时 候 ， 病 房 被 照 亮 了 ， 天 使 忽然 出 现在 男孩 的 面前 ， 男 孩 被 吓 呆 了 ， 揉 了 揉 哭 肿 了 
的 眼睛 ， 握 着 女孩 的 手 ， 哭 着 对 天 使 说 ， 求 你 救 救 这 个 善良 的 女孩 吧 ， 天 使 对 男孩 说 ， 只 要 你 愿意 ， 为 女孩 做 3 
年 晴 星 ， 女 孩 就 会 慢 慢 地 好 起 来 ， 男 孩 毫 不 犹 物 地 答应 了 ， 天 使 消失 了 ， 同 时 男孩 也 变 成 了 一 只 晴 蝇 。 后 来 …… 

</div> 
</body> 
</html> 


这 一 实例 中 本 来 设置 图 像 漂浮 在 文字 右 侧 , 但 由 
于 文字 设置 了 不 允许 右 侧 有 漂浮 对 象 , 因此 文字 被 移 
动 到 图 像 的 下 方 ， 如 图 11-39 所 示 。 


11-39 设置 清除 属性 


第 11 章 CSS 样式 表 sys 


11.8.6 可 视 区 域 一 一 clip 


可 视 区 域 用 于 设置 层 对 象 的 可 视 区 域 ， 在 区 域外 的 部 分 是 透明 的 。 也 可 以 认为 通过 设 定 了 上 下 左 
右 的 边界 值 将 对 象 裁 切 成 一 个 矩形 区 域 ， 在 页 面 中 只 显示 这 个 区 域 。 但 是 只 有 在 position 的 值 设 定 为 
absolute 时 ， 该 属性 才能 正常 使 用 。 

语法 : clip : auto | rect (数值 ) 

说 明 : auto 表示 对 象 不 裁 切 ，rect (数值 ) 中 可 以 设 定 4 个 数字 ， 它 表示 依据 上 、 右 、 下 、 左 的 顺序 ， 
以 对 象 左 上 角 为 (0,0) 坐 标 计 算 的 4 个 偏 移 数值 ， 其 中 任何 一 个 数值 都 可 用 auto 替换 , 表示 此 边 不 裁 切 。 

实例 代码 : 


<html> 
<head> 
<title> 设 定 可 视 区 域 属性 </title> 
<style> 
过 = 
h2{ 
font-family: 黑 体 ; 
font-size:16pt 
} 
.lowdiv { 
position: absolute; 
top: 55pt; 
left: 220pt; 
z-index:1 
} 
.place { 
font-size:11pt; 
color:#CC0000; 
text-indent:20pt; 
position: absolute; 
top:70pt'; 
left:15pt; 
z-index:2; 
clip: rect(auto 16cm 160px 3cm) 
} 


一 > 
</style> 
</head> 
<body> 

<h2> 晴 蜂 的 眼泪 </h2> 

<div class=lowdiv><img src="pic06.jpg"></div> 

<div class=place> 

男孩 跟 女 孩 是 一 对 热恋 中 的 恋人 ， 很 不 幸 的 是 女孩 在 一 次 体操 比赛 中 倒 下 了 ， 医 生 确诊 为 : 白血病 。 男 

孩 每 天 都 陪 在 女孩 的 病床 前 ， 看 着 女孩 那 苍白 惟 以 的 脸 ， 男 孩 深 了 。 器 的 很 伤心 ， 男 孩 每 天 晚上 都 在 女孩 的 病床 
前 ， 为 女孩 折 上 几 只 千 纸 鹤 ， 就 这 样 过 了 几 个 月 。 女 孩 已 经 寿 译 一 息 了 ， 一 直 展 迷 着 ， 男 孩 还 是 重复 地 为 女孩 折 
千 纸 鹤 ， 男 孩 折 到 1000 只 整 的 时 候 ， 病 房 被 照 亮 了 ， 天 使 忽然 出 现在 男孩 的 面前 ， 男 孩 被 吓 有 杂 了 ， 揉 了 揉 哭 肿 了 
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的 眼睛 ， 握 着 女孩 的 手 ， 哭 着 对 天 使 说 ， 求 你 救 救 这 个 羡 良 的 女孩 吧 ， 天 使 对 男孩 说 ， 只 要 你 愿意 ， 为 女孩 做 3 
年 晴 星 ， 女 孩 就 会 慢 慢 地 好 起 来 ， 男 孩 毫 不 犹 瑰 地 答应 了 ， 天 使 消失 了 ， 同 时 男孩 也 变 成 了 一 只 晴 晚 。 后 来 …… 
<br> 
<img src="pic06.jpg" width="110" align="right"> 
</div> 
</body> 
</html> 


运行 代码 ， 效 果 如 图 11-40 所 示 ， 其 中 ， 同 时 包含 文字 和 图 像 的 层 被 裁 切 。 其 中 设 定 左上 角 为 原 
点 0.0， 上 侧 不 裁 切 ， 左 侧 从 横 坐 标 为 3cm 的 位 置 裁 切 ， 右 侧 从 左 起 横 坐 标 为 16cm 的 位 置 裁 切 ， 向 下 
则 从 原点 起 160px 的 位 置 裁 切 。 


MD 
全 击 ， 下 者 文 形 理 所 : 人 洪 瑟 闪 
2 了 


图 11-40 设 定 可 视 区 域 


11.8.7 ” 设 定 大 小 一 一 width、height 


height 和 width 分 别 用 于 设 定 层 的 高 度 和 宽度 。 
width : auto | 长 度 
height: auto | 长 度 
说 明 : 此 处 ，auto 表示 自动 设 定 长 度 ， 一 般 以 层 包含 的 内 容 为 准 ， 如 果 设 定 确切 的 长 度 ， 需 要 设 
定数 值 和 单位 。 


全 注意 : 对 于 一 个 层 来 说 ， 一 般 只 能 设 定 宽度 或 高 度 中 的 一 个 值 ， 另 外 一 个 值 则 根据 内 容 自 动 确定 。 
如 果 同 时 设 定 两 个 值 ， 则 需要 同时 定义 后 面 将 要 讲解 的 overflow 属性 。 


实例 代码 : 


<html> 
<head> 
<title> 设 定 层 的 宽度 </title> 
<style> 
<|-- 
h2{ 
font-family: 黑 体 ; 
font-size:16pt 
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.lowdiv{ 
position: absolute; 
top: 55pt; 
left: 220pt; 
z-index:1 
} 
.place { 
font-size:11pt; 
color:#CC0000; 
text-indent:20pt; 
position: absolute; 
top:70pt; 
left:35pt; 
z-index:2; 
width: 310pt 
} 
一 > 
</style> 
</head> 
<body> 
<h2> 晴 旺 的 眼泪 </h2> 
<div class=lowdiv><img src="pic06.jpg"></div> 
<div class=place> 
男孩 跟 女 孩 是 一 对 热恋 中 的 恋人 ， 很 不 幸 的 是 女孩 在 一 次 体操 比赛 中 倒 下 了 ， 医 生 确 诊 为 : 白血病 。 男 
孩 每 天 都 陪 在 女孩 的 病床 前 ， 看 着 女孩 那 苍白 惟 迟 的 脸 ， 男 孩 哭 了 。 哭 的 很 伤心 ， 男 孩 每 天 晚上 都 在 女孩 的 病床 
前 ， 为 女孩 折 上 几 只 千 纸 鹤 ， 就 这 样 过 了 几 个 月 。 女 孩 已 经 达 达 一 息 了 ， 一 直 昏 迷 着 ， 男 孩 还 是 重复 地 为 女孩 折 
千 纸 鹤 ， 男 孩 折 到 1000 只 整 的 时 候 ， 病 房 被 照 亮 了 ， 天 使 忽然 出 现在 男孩 的 面前 ， 男 孩 被 吓 呆 了 ， 揉 了 揉 哭 肿 了 
的 眼睛 ， 握 着 女孩 的 手 ， 器 着 对 天 使 说 ， 求 你 救 救 这 个 善良 的 女孩 吧 ， 天 使 对 男孩 说 ， 只 要 你 愿意 ， 为 女孩 做 3 
年 晴 蚜 ， 女 孩 就 会 慢 慢 地 好 起 来 ， 男 孩 毫 不 犹 瑰 地 答应 了 ， 天 使 消失 了 ， 
同时 男孩 也 变 成 了 一 只 晴 旺 。 后 来 ……<br> 


</div> 
</body> 
</html> 
运行 程序 ， 效 果 如 图 11-41 所 示 ， 其 中 设 定 了 文字 层 的 宽度 为 2 
310pt。 
11.8.8 超出 范围 overflow 图 11-41 设置 层 的 大 小 


超出 范围 属性 用 于 设 定 当 层 的 内 容 超出 所 能 容纳 的 范围 时 的 显示 属性 。 

语法 : overflow : visible | auto | hidden | scroll 

说 明 : visible 表示 不 剪 切 内 容 也 不 添加 滚动 条 ;，auto 是 <body> 对 象 和 <textarea> 对 象 的 默认 值 ， 它 
在 需要 时 剪 切 内 容 并 添加 滚动 条 ; hidden 表示 不 显示 超过 对 象 尺 寸 的 内 容 : scroll 则 表示 总 显示 滚动 条 。 


名 注意 : 如 果 显 式 声明 visible 为 默认 值 ， 对 象 将 被 剪 切 为 包含 对 象 的 窗口 或 框架 的 大 小 ， 并 且 clip 属 
性 设置 将 失效 。 
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实例 代码 : 


<html> 
<head> 
<title> 设 定 超出 范围 属性 </title> 
<style> 
h2{ 
font-family: 黑 体 ; 
font-size:16pt 
} 
.place { 
font-size:11pt; 
color:#CC0000; 
text-indent:20pt; 
position: absolute; 
top: 70pt; 
left: 30pt; 
height: 130px; 
width: 370px; 
overflow: hidden; 
} 
一 > 
</style> 
</head> 
<body> 
<h2> 晴 旺 的 眼泪 </h2> 
<center><img src="pic06.jpg"></center> 
<div class=place> 男 孩 跟 女 孩 是 一 对 热恋 中 的 恋人 , 很 不 幸 的 是 女孩 在 一 次 体操 比赛 中 倒 下 了 ， 医 生 确 诊 为 : 
和 白血病。 男孩 每 天 都 陪 在 女孩 的 病床 前 ， 看 着 女孩 那 苍白 惟 迟 的 脸 ， 男 孩 哭 了 。 哭 的 很 伤心 ， 男 孩 每 天 晚上 都 在 
女孩 的 病床 前 ， 为 女孩 折 上 几 只 千 纸 鹤 ， 就 这 样 过 了 几 个 月 。 女 孩 已 经 寿 达 一 息 了 ， 一 直 昏 迷 着 ， 男 孩 还 是 重复 
地 为 女孩 折 千 纸 鹤 ， 男 孩 折 到 1000 只 整 的 时 候 , 病房 被 照 亮 了 ， 
天 使 忽然 出 现在 男孩 的 面前 ， 男 孩 被 吓 呆 了 ， 揉 了 揉 哭 肿 了 的 眼 
睛 , 握 着 女孩 的 手 ， 器 着 对 天 使 说 , 求 你 救 救 这 个 善良 的 女孩 吧 ， 
天 使 对 男孩 说 ， 只 要 你 愿意 ， 为 女孩 做 3 年 晴 星 ， 女 孩 就 会 慢 慢 
地 好 起 来 ， 男 孩 毫 不 犹豫 地 答应 了 ， 天 使 消失 了 ， 同 时 男孩 也 变 
成 了 一 只 晴 旺 。 后 来 ……</div> 
</body> 
</html> 


运行 程序 的 效果 如 图 11-42 所 示 。 


本 二 E 


图 11-42 设置 超出 范围 的 显示 属性 


11.8.9 可 见 属性 一 一 visibility 


可 见 属性 用 于 设 定 嵌 套 层 的 显示 属性 ， 此 属性 可 以 将 嵌 套 层 隐 藏 ， 但 仍然 为 隐藏 对 象 保留 其 占据 
的 物理 空间 。 如 果 希 望 对 象 为 可 视 ， 其 父 对 象 也 必须 是 可 视 的 。 


避 
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语法 : visibility : inherit | visible |hidden 
说 明 : 在 该 语法 中 ，inherit 表示 继承 上 一 个 父 对 象 的 可 见 性 ， 即 如 果 父 对 象 可 见 ， 则 该 对 象 也 可 
反之 则 不 可 见 ; visible 表示 对 象 是 可 见 的 ， hidden 表示 对 象 隐藏 。 
实例 代码 : 
<html> 
<head> 
<title> 设 置 可 见 属性 </title> 
<style> 
本 = 
h2{ 
font-family: 黑 体 ; 
font-size:16pt 


‘lowdiv { 
position: absolute; 
top: 40pt; 
left: 240pt; 
z-index:1 

} 

.place { 
font-size:11pt; 
color:#CC0000; 
text-indent:20pt; 
position: absolute; 
top: 50pt; 
left: 20pt; 
z-index:2; 
visibility : hidden 


img{ visibility : inherit } 
一 > 
</style> 
</head> 
<body> 
<h2> 晴 蜂 的 眼泪 </h2> 
<div class=lowdiv><img src="pic06.jpg"></div> 
<div class=place> 
男孩 跟 女 孩 是 一 对 热恋 中 的 恋人 ， 很 不 幸 的 是 女孩 在 一 次 体操 比赛 中 倒 下 了 ， 医 生 确 诊 为 : 白血病 。 男 
孩 每 天 都 陪 在 女孩 的 病床 前 ， 看 着 女孩 那 苍 白 惟 迟 的 脸 ， 男 孩 哭 了 。 哭 的 很 伤心 ， 男 孩 每 天 晚上 都 在 女孩 的 病床 
前 ,为 女孩 折 上 几 只 千 纸 鹤 ， 就 这 样 过 了 几 个 月 。 女 孩 已 经 龙 瘟 一 息 了 ， 一 直 贰 迷 着 ， 男 孩 还 是 重复 地 为 女孩 折 
千 纸 鹤 ， 男 孩 折 到 1000 只 整 的 时 候 ， 病 房 被 照 亮 了 ， 天 使 忽然 出 现在 男孩 的 面前 ， 男 孩 被 吓 呆 了 ， 揉 了 揉 哭 肿 了 
的 眼睛 ， 握 着 女孩 的 手 ， 器 着 对 天 使 说 ， 求 你 救 救 这 个 善良 的 女孩 吧 ， 天 使 对 男孩 说 ， 只 要 你 愿意 ， 为 女孩 做 3 
年 晴 星 ， 女 孩 就 会 慢 慢 地 好 起 来 ， 男 孩 毫 不 犹 瑰 地 答应 了 ， 天 使 消失 了 ， 同 时 男孩 也 变 成 了 一 只 晴 星 。 后 来 …… 
<br> 
<img src="pic06.jpg" width="110" align="right"> 
</div> 
</body> 
</html> 
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运行 程序 ， 可 以 看 到 应 用 了 place 类 的 层 不 可 见 ， 而 图 像 img 的 visibility 属性 被 设 定 为 inherit， 因 
此 place 层 中 的 图 像 也 不 可 见 ， 如 图 11-43 所 示 。 
如 果 将 代码 中 的 
img{ visibility : inherit } 
更 改 为 
img{ visibility : visible } 
运行 效果 则 如 图 11-44 所 示 。 由 于 设 定 了 img 的 可 见 属性 为 visible， 因 此 虽然 小 图 像 所 在 的 层 被 
隐藏 ， 但 是 图 像 仍然 可 见 。 
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图 11-43 设 定 可 见 属性 图 11-44 调整 可 见 属性 


11.9 列表 属性 
列表 属性 主要 用 于 设置 列表 项 的 样式 ， 包 括 符号 、 缩 进 等 。 
11.9.1 ”列表 符号 一 list-style-type 


列表 符号 属性 用 于 设 定 列表 项 的 符号 。 
语法 : list-style-type: < 值 > 
说 明 : 可 以 设置 多 种 符号 作为 列表 项 的 符号 ， 其 具体 取 值 范围 见 表 11-4。 
表 11-4 ”列表 符号 的 取 值 
符号 的 取 值 


含义 
none 不 显示 任何 项 目 符号 或 编号 
disc 以 实心 圆 形 @ 作 为 项 目 符号 
circle 以 空心 圆 形 〇 作为 项 目 符号 
square 以 实心 方块 国 作 为 项 目 符号 
decimal 


以 普通 阿拉 伯 数 字 1、2、3… 作 为 项 目 编号 
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符号 的 取 值 


lower-roman 


含义 
以 小 写 罗马 数字 i、 诈 、 刘 … 作 为 项 目 编号 
以 大 写 罗 马 数字 LI、IL、II… 作 为 项 目 编号 
以 小 写 英文 字母 a、b、c… 作 为 项 目 编号 


upper-roman 


lower-alpha 


upper-alpha 以 大 写 英文 字母 A、B、C… 作 为 项 目 编号 
实例 代码 : 
<html> 
<head> 
<title> 设 定 列表 符号 </title> 
<style> 


<!-- 
body{ font-size: 12pt} 
h2{ 
font-family: 黑 体 ; 
font-size:16pt 


} 
ol list-style-type: square } 


= 


</style> 
</head> 
<body> 
<h2> 网 页 创作 的 相关 知识 : </h2> 
<ol> 
<li> HTML 是 英文 Hyper Text Markup Language 的 缩写 ， 即 超 文 本 标志 语言 
<li> CSS 是 Cascading Style Sheets 〈 层 鸽 样 式 表 ) 的 简称 ， 是 一 种 设计 网 页 样式 的 工具 
<li> JavaScript 是 一 种 新 的 描述 语言 ， 此 语言 可 以 被 嵌入 HTML 的 文件 之 中 
</ol> 
</body> 
</html> 


运行 程序 ， 效 果 如 图 11-45 所 示 。 


mam ,全 


网 页 创作 的 相关 知识 : 


图 11-45 ” 设 定 列表 符号 
11.9.2 ”图像 符号 一 一 list-style-image 


图 像 符号 属性 使 用 图 像 作为 列表 项 目 符号 ， 以 美化 页 面 。 
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语法 : list-style-img: list-style-image : none | url( 图 像 地 址 ) 

说 明 : none 表示 不 指定 图 像 ，url 则 使 用 绝对 或 相对 地 址 指定 作为 符号 的 图 像 。 
实例 代码 : 

<html> 

<head> 

<title> 设 定 图 像 符号 </title> 


<style> 
ee 


body{ font-size: 12pt} 


h2{ 
font-family: 黑 体 ; 
font-size:16pt 
} 
ol{ 
list-style-type: square; 
list-style-image:url(pic07 jpg) 
} 
一 > 
</style> 
</head> 
<body> 
<h2> 网 页 创作 的 相关 知识 : </h2> 
<ol> 


<li> HTML 是 英文 Hyper Text Markup Language 的 缩写 ， 即 超 文本 标志 语言 
<li> CSS 是 Cascading Style Sheets 〈 层 鸽 样 式 表 ) 的 简称 ， 是 一 种 设计 网 页 样式 的 工具 
<li> JavaScript 是 一 种 新 的 描述 语言 ， 此 语言 可 以 被 嵌入 HTML 的 文件 之 中 
</ol> 
</body> 
</html> 


运行 程序 ， 效 果 如 图 11-46 所 示 。 


图 11-46 设置 图 像 符号 
11.9.3 ”列表 缩 进 一 一 list-style-position 


列表 缩 进 属性 用 于 设 定 列表 缩 进 的 设置 。 


语法 : list-style-position: outside | inside 
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说 明 : outside 表示 列表 项 目标 记 放 置 在 文本 以 外 ， 且 环绕 文本 不 根据 标记 对 齐 ; inside 是 列表 的 
默认 属性 ， 表 示 列 表 项 目标 记 放 置 在 文本 以 内 ， 且 环绕 文本 根据 标记 对 齐 。 
实例 代码 : 


<html> 
<head> 
<title> 设 定 列表 缩 进 </title> 
<style> 
ss 
body{ font-size: 12pt} 
h2{ 
font-family: 黑 体 ; 
font-size:16pt 


ol{ 
list-style-type: square; 
list-style-image:url(pic07 .jpg); 
list-style-position: inside 


一 > 
</style> 
</head> 
<body> 
<h2> 网 页 创作 的 相关 知识 ，</h2> 
<ol> 
<li> HTML 是 英文 Hyper Text Markup Language 的 缩写 ， 即 超 文本 标志 语言 
<li> CSS 是 “Cascading Style Sheet” 的 缩写 ， 可 以 翻译 为 “层叠 样式 表 ” 或 “级 联 样式 表 ”， 即 “ 样 
式 表 ”， 是 一 种 设计 网 页 样式 的 工具 
<li> JavaScript 是 一 种 新 的 描述 语言 ， 此 语言 可 以 被 嵌入 HTML 的 文件 之 中 
</ol> 
</body> 
</html> 


运行 代码 ， 可 以 看 到 设置 缩 进 为 inside 的 效果 如 图 11-47 所 示 。 


图 11-47 设置 列表 缩 进 


11.9.4 复合 属性 : 列表 一 一 list-style 


列表 函数 list-style 是 以 上 3 种 列表 属性 的 组 合 。 
将 上 一 个 实例 使 用 list-style 实现 ， 代 码 如 下 : 
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<html> 
<head> 
<title> 设 定 列表 缩 进 </title> 
<style> 
<!-- 
body{ font-size: 12pt} 
h2{ 
font-family: 黑 体 ; 
font-size:16pt 


ol list-style: square inside url(pic07 .jpg); } 
一 > 
</style> 
</head> 
<body> 
<h2> 网 页 创作 的 相关 知识 : </h2> 
<ol> 
<li> HTML 是 英文 Hyper Text Markup Language 的 缩写 ， 即 超 文 本 标志 语言 
<li> CSS 是 “Cascading Style Sheet” 的 缩写 ， 可 以 翻译 为 “层叠 样式 表 ” 或 “级 联 样式 表 ”， 即 “ 样 
式 表 ”， 是 一 种 设计 网 页 样式 的 工具 
<li> JavaScript 是 一 种 新 的 描述 语言 ， 此 语言 可 以 被 嵌入 HTML 的 文件 之 中 
</ol> 
</body> 
</html> 


运行 程序 ， 会 发 现 本 实例 能 实现 和 上 一 个 实例 相同 的 效果 ， 而 且 更 加 简便 。 
11.10 光标 属性 一 一 cursor 


光标 属性 是 CSS 中 用 于 专门 设置 在 对 象 上 移动 的 鼠标 指针 所 采用 的 光标 形状 。 

语法 : cursor : auto | 形状 取 值 | url( 图 像 地 址 ) 

说 明 : 在 该 语法 中 包含 3 种 类 型 的 取 值 ，auto 表示 根据 页 面 的 内 容 自 动 选择 光标 形状 ，url( 图 像 ) 
则 表示 采用 自 定 义 的 图 像 作为 光标 形状 ; 形状 取 值 则 是 系统 预定 义 的 几 种 光标 形状 ， 其 具体 含义 见 表 11-5。 


表 11-5 ”光标 形状 取 值 


光标 形状 取 值 具体 含义 
hand Fp 
crosshair 交叉 十 字形 十 
text 文本 选择 形状 | 
default 默认 的 箭头 形状 
help 带 有 问号 的 箭头 2 
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续 表 
光标 形状 取 值 具体 含义 
e-resize 向 东 的 箭头 和 
ne-resize 向 东北 的 箭头 
n-resize 向 北 的 箭头 1 
nw-resize 向 西北 的 箭头 ~ 
WwW-resize 向 西 的 箭头 和? 
Sw-resize 西南 的 箭头 六 
Ss-resize 向 南 的 箭头 
se-resize 向 东南 的 箭头 
实例 代码 : 
<html> 
<head> 
<title> 设 定 光 标 形状 </title> 
<style> 
= 
h2{ 
font-family: 黑 体 ; 
font-size:16pt; 
cursortext 


img {cursor:hand} 
一 > 
</style> 
</head> 
<body> 
<h2> 一 幅 漂亮 的 图 像 </h2> 
<img src="pic06.jpg"> 
</body> 
</html> 


运行 程序 ， 看 到 当 和 鼠标 位 于 <h2> 标 记 的 内 容 上 时 ， 光 标 变 为 文本 选择 形状 ， 如 图 11-48 所 示 ; 而 
当 鼠 标 位 于 图 片上 时 ， 光 标 变 为 手 形 ， 如 图 11-49 所 示 。 
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图 11-48 文本 光标 效果 图 11-49 手 形 光标 效果 
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11.11 滤 镜 属性 


filter 是 微软 对 CSS 的 扩展 ， 与 Photoshop 中 的 滤 镜 相似 ， 它 可 以 用 很 简单 的 方法 对 页 面 中 的 文字 
进行 特效 处 理 。 使 用 滤 镜 属性 可 以 把 一 些 特别 的 效果 添加 到 HTML 元 素 中 ， 使 页 面 更 加 美观 。 但 一 般 
情况 下 ， 滤 镜 属性 需要 应 用 在 已 知 大 小 的 块 级 元 素 中 ， 才 能 达到 很 好 的 效果 。 滤 镜 的 基本 语法 如 下 : 

filter : 滤 镜 名 称 〈 参 数 1， 参 数 2，…) 

下 面 介绍 几 种 常见 的 滤 镜 效果 的 具体 设置 方法 。 


11.11.1 不 透明 度 一 一 alpha 


alpha 滤 镜 用 于 设置 图 片 或 文字 的 不 透明 度 。 它 是 把 一 个 目标 元 素 与 背景 混合 ， 通 俗 地 说 就 是 一 个 
元 素 的 透明 度 。 通 过 指定 坐标 ， 可 以 指定 点 、 线 、 面 的 透明 度 。 

语法 : filter: alpha( 参 数 1= 参 数值 ， 参 数 2= 参 数值 …) 

说 明 : alpha 属性 包括 很 多 参数 ， 见 表 11-6。 


表 11-6 alpha 属性 的 参数 设置 


参数 具体 含义 及 取 值 
到 代表 透明 度 水 准 ， 默 认 的 范围 是 从 0 一 100， 表 示 透 明度 的 百 分 
比 。 也 就 是 说 ，0 代 表 完 全 透明 ，100 代 表 完 全 不 透明 
dy 是 一 个 可 选 参 数 ， 如 果 要 设置 渐变 的 透明 效果 ， 可 以 使 用 该 参 
数 来 指定 结束 时 的 透明 度 。 范 围 也 是 0 一 100 
yo 参数 指定 了 透明 区 域 的 形状 特征 。 其 中 0 代表 统一 形状 、1 代 表 
线形 、2 代 表 放 射 状 、3 代 表 长 方形 
Startx 代表 渐变 透明 效果 的 开始 X 坐 标 
Sta 代表 渐变 透明 效果 的 开始 Y 坐 标 
finishx 代表 渐变 透明 效果 的 结束 X 坐 标 
finishy 代表 渐变 透明 效果 的 结束 Y 坐 标 
实例 代码 : 
<html> 
<head> 
<title> 设 置 图 像 的 透明 效果 </title> 
<style> 


h2{ font-family: "黑体 "; font-size:15pt} 

body{font-size:12pt} 

.alphaall{filter:alpha(opacity=50)} 

.alpharad{ 
filter:alpha(opacity=0,finishopacity=100,style=2,startx=0,starty=5,finishx=200,finishy=185) 
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</style> 
</head> 
<body> 
<h2> 下 面 是 对 同样 的 图 像 使 用 了 不 同 alpha 滤 镜 的 效果 </h2> 
<table border=1 bordercolor="#660000" cellpadding=5 width=600 align="center> 
<tr height=30> 
<td> 原 图 </td> 
<td> 整 体 设置 50% 透 明度 的 效果 </td> 
<td> 设 置 一 个 放射 性 的 渐变 透明 效果 </td> 
</tr> 
<tr height=240> 
<td><img src="pic08.jpg"></td> 
<td><img class=alphaall src="pic08.jpg"></td> 
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<td><img class=alpharad src="pic08.jpg"></td> 品 [aa 
<hr> Ba 
</table> 1 j 
</body> 区 
</html> dd IN 
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运行 效果 如 图 11-50 所 示 。 
人 图 11-50 设置 图 像 不 透明 度 的 效果 


11.11.2 ”动感 模糊 一 一 blur 


动感 模糊 滤 镜 用 于 在 指定 块 级 元 素 的 方向 和 位 置 上 产生 动感 模糊 的 效果 。 

语法 : filter: blur(add= 参 数值 , direction= 参 数值 , strength= 参 数值 ) 

说 明 : 在 语法 中 ，add 参数 是 一 个 布尔 判断 ， 可 取 值 为 tue 或 false， 它 指定 图 片 是 否 被 改变 成 印 
象 派 的 模糊 效果 ; direction 参数 用 来 设置 模糊 的 方向 ， 是 按 顺 时 针 的 方向 以 45” 为 单位 进行 累积 的 ， 
例如 0 代表 垂直 向 上 ，135 表示 垂直 向 上 开始 顺 时 针 旋转 135” 的 方向 , 默认 值 是 270， 即 向 左 的 方向 ; 
strength 值 只 能 使 用 整数 来 指定 ， 代 表 有 多 少 像素 的 宽度 将 受到 模糊 影响 ， 默 认 是 5 个。 


名 注意: 动感 模糊 对 HTML 的 块 级 元 素 ( 如 层 、 图 像 等 ) 有 效 ， 如 果 要 对 文字 进行 动感 模糊 ， 要 首先 
将 文字 放置 于 一 个 块 状元 素 内 ， 如 层 ， 然 后 要 确定 这 个 块 级 元 素 的 大 小 。 


实例 代码 : 


<html> 
<head> 
<title> 设 置 元 素 的 动感 模糊 </title> 
<style type="text/css"> 
<!-- 
body{ font-size:12pt} 
div.example { 
font-family:" 黑 体 "; 
font-size:16pt; 
width:500px; 
height:30px; 
filter:blur(add=ture,direction=135,strength=10); 
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} 
.blurbig{filter:blur(strength=80);} 
.blursmall{filter:blur(direction=305,strength=20);} 
一 > 
</style> 
</head> 
<body> 
<div class="example"> 下 面 是 对 同样 的 图 像 使 用 了 不 同 blur 小 镜 的 效果 </div> 
<table border=1 bordercolor="#660000" cellpadding=5 width=660 align="center> 
<tr height=70 align="center"> 
<td width=220> 原 图 </td> 
<td width=220> 设 置 strength 为 80 的 动感 模糊 效果 </td> 
<td width=220> 设 置 方向 为 从 垂直 向 上 顺 时 针 旋转 305 度 ，strength 设置 为 20 的 模糊 效果 </td> 
</tr> 
<tr height=260 align="center"> 
<td><img src="pic09.jpg"></td> 
<td><img class="blurbig" src="pic09.jpg"></td> 
<td><img class="blursmall" src="pic09.jpg"></td> 
</tr> 
</table> 
</body> 
</html> 


运行 程序 ， 效 果 如 图 11-51 所 示 。 
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图 11-51 设置 动感 模糊 的 效果 
11.11.3 ”对 颜色 进行 透明 处 理 一 一 chroma 


chroma 滤 镜 可 以 实现 对 所 选择 的 颜色 进行 透明 处 理 的 效果 。 
语法 : filter: chroma(color= 颜 色 代 码 或 颜色 关键 字 ) 

说 明 : 参数 color 即 为 要 透明 的 颜色 。 

实例 代码 : 

<html> 

<head> 


<title> 设 置 颜色 的 透明 处 理 </title> 


人 


垂直 距离 ， 
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<style type="text/css"> 
= 
body{ font-size:12pt} 
div.example { 
font-family:" 黑 体 "; 
font-size:16pt; 
width:500px; 
height:30px; 
filter:blur(add=ture,direction=135,strength=10); 
} 
.transone{ filter:chroma(color=#526373); } 
-transtwof filter:chroma(color=#52A5DE); } 
一 > 
</style> 
</head> 
<body bgcolor="#FFDDBB"> 
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<div class="example"> 下 面 是 对 同样 的 图 像 使 用 了 不 同 blur 滤 镜 的 效果 </div> 
<table border=1 bordercolor="#660000" cellpadding=5 width=660 align="center"> 


<tr height=70 align="center"> 
<td width=220> 原 图 </td> 


<td width=220> 女 士 的 衣服 颜色 设 为 透明 ， 露 出 背景 色 </td> 


<td width=220> 显 示 屏 颜色 为 透明 </td> 
</tr> 
<tr height=260 align="center"> 
<td><img src="pic10.gif’></td> 
<td><img class=transone src="pic10.gif’></td> 
<td><img class=transtwo src="pic10.gif"></td> 
</tr> 
</table> 
</body> 
</html> 


运行 程序 ， 效 果 如 图 11-52 所 示 。 


.11.4 ”设置 阴影 一 一 dropShadow 


dropShadow 滤 镜 在 指定 的 方向 和 位 置 上 产生 阴影 。 
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图 11-52 透明 处 理 


语法 : filter: dropShadow(color= 阴 影 颜 色 , offX= 参 数值 , offY= 参 数值 , positive= 参 数值 ) 
说 明 : color 属性 用 于 设置 阴影 的 颜色 ; offX、offY 分 别 用 于 设置 阴影 相对 图 像 移动 的 水 平 距离 和 


实例 代码 : 


<html> 

<head> 

<title> 设 置 元 素 的 阴影 </title> 
<style type="text/css"> 


positive 是 一 个 布尔 值 (0 或 1) ， 其 中 0 指 为 透明 像素 生成 阴影 ，1 指 为 不 透明 像素 生成 
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< 
body{ font-size:12pt} 
div.example { 
font-family:" 黑 体 "; 
font-size:16pt; 
width:500px; 
height:30px; 
filter:dropshadow(color=blue, offx=5, offy=4, positive=1); 
} 
.dropshadow {filter:dropshadow(color="#212022",0ffx=15,0ffy=10, positive=1);} 
一 > 
</style> 
</head> 
<body> 
<div class="example"> 下 面 是 对 同样 的 图 像 使 用 了 阴影 效果 </div> 
<table border=1 bordercolor="#660000" cellpadding=5 width=660 align="center"> 
<tr height=30 align="center"> 
<td width=330> 原 图 </td> 
<td width=330> 设 置 阴影 效果 </td> 
</tr> 
<tr height=260 align="center"> 
<td><img src="pic09.jpg"></td> 
<td class=dropshadow><img src="pic09.jpg"></td> 
</tr> 
</table> 
</body> 
</html> 


运行 程序 ， 效 果 如 图 11-53 所 示 。 
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图 11-53 设置 阴影 的 效果 
11.11.5 ”对 象 的 翻转 一 一 fipH、flipV 
flipH 滤 镜 可 以 沿 水 平方 向 翻转 对 象 ，flipV 滤 镜 可 以 沿 垂直 方向 翻转 对 象 。 


语法 > 
filter: flipH 
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filter flipV 
实例 代码 : 


<html> 
<head> 
<title> 翻 转 图 像 </title> 
<style type="text/css"> 
<I-- 
body{ font-size:12pt} 
h2{ font-family: "黑体 "; font-size:15pt} 
-turnh{ filter: flipH} 
.turnv{ filter: flipV} 
一 > 
</style> 
</head> 
<body> 
<h2> 下 面 是 对 同样 的 图 像 进行 了 翻转 </h2> 


<table border=1 bordercolor="#660000" cellpadding=5 width=660 align="center"> 


<tr height=30 align="center"> 
<td width=220> 原 图 </td> 
<td width=220> 水 平 翻转 效果 </td> 
<td width=220> 垂 直 翻 转 效果 </td> 
</tr> 
<tr height=260 align="center > 
<td><img src="pic09.jpg"></td> 
<td class=tumh><img src="pic09.jpg"></td> 
<td class=tumv><img src="pic09.jpg"></td> 
</tr> 
</table> 
</body> 
</html> 


运行 程序 ， 效 果 如 图 11-54 所 示 。 
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下 面 是 对 同样 的 图 像 进 行 了 翻转 
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11.11.6 发光 效 果 一 一 glow 


glow 滤 镜 可 以 实现 在 对 象 周围 发 光 的 效果 。 当 对 一 个 对 象 使 用 glow 属性 后 , 这 个 对 象 的 边缘 就 会 
产生 类 似 发 光 的 效果 。 

语法 : filter: glow(color= 颜 色 代码 , strength= 强 度 值 ) 

说 明 : color 参数 用 来 指定 发 光 的 颜色 : strength 参数 用 于 设置 强度 ， 可 以 使 用 从 1 一 255 之 间 的 任 
何 整数 来 指定 这 个 力度 。 


全 注意 : 在 使 用 glow 滤 镜 的 过 程 中 ， 最 好 将 要 发 光 的 元 素 放置 到 块 级 元 素 中 使 用 ， 如 层 。 
实例 代码 ; 


<html> 
<head> 
<title> 发 光 效果 </title> 
<style type="text/css"> 
<|-- 
body{ font-size:12pt} 
h2{ font-family: "黑体 "; font-size:15pt; filter: glow(color=red, strength=50)} 
.glowf filter: glow(color=blue, strength=8)} 
.glow2{ filter: glow(color=blue, strength=30)} 
div{width:210} 
一 > 
</style> 
</head> 
<body> 
<h2> 下 面 是 对 同样 的 图 像 使 用 了 glow 滤 镜 </h2> 
<table border=1 bordercolor="#660000" cellpadding=5 width=660 align="center"> 
<tr height=30 align="center"> 
<td width=200> 原 图 </td> 
<td width=220>strength 为 8 的 蓝光 效果 </td> 
<td width=240>strength 为 20 的 蓝光 效果 </td> 
</tr> 
<tr height=260 align="center"> 
<td><img src="pic09.jpg"></td> 


<td><divclass=glow><img EE la 
src="pic09.jpg"></div></td> 纺 | i 
<td><divclass=glow2><img rp 
i 原 加 streneth 为 8 的 蓝光 热 果 strength 为 20 的 蓝 北 效果 
</tr> 
</table> 
</body> 
</html> 
运行 程序 ， 效 果 如 图 11-55 所 示 。 
ew Fm 


图 11-55 发光 效 果 
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11.11.7” 灰 度 处 理 一 一 gray 


gray 滤 镜 是 把 一 张 图 片 变 成 灰 度 图 。 灰 度 也 不 需要 设 定 参数 ， 它 去 除 目标 的 所 有 色彩 ， 


度 级 别 显 示 。 
语法 : filter:gray 
实例 代码 : 


<html> 
<head> 
<title> 灰 度 处 理 </title> 
<style type="text/css"> 
< 
body{ font-size:12pt} 
h2{ font-family: "黑体 "; font-size:15pt; } 
.gray{ filter: gray} 
div{width:300} 
一 > 
</style> 
</head> 
<body> 
<h2> 下 面 是 对 同样 的 图 像 使 用 了 灰 度 滤 镜 </h2> 
<table border=1 bordercolor="#660000" cellpadding=5 width=660 align="center> 
<tr height=30 align="center"> 
<td width=330> 原 图 </td> 
<td width=330> 灰 度 效果 </td> 
</tr> 
<tr height=260 align="center"> 
<td><img src="pic08.jpg"></td> 
<td><div class=gray><img src="pic08.jpg"></div></td> 
</tr> 
</table> 
</body> 
</html> 


运行 程序 ， 效 果 如 图 11-56 所 示 。 
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11.11.8 反 相 一 一 invert 


invert 滤 镜 是 把 对 象 反 相 ， 也 就 是 将 其 可 视 化 属性 全 部 反 转 ， 包 括 色彩 、 饱 和 度 和 亮度 值 。 
语法 : filter: invert 
实例 代码 : 


<html> 
<head> 
<title> 反 相处 理 </title> 
<style type="text/css"> 
<|-- 
body{ font-size:12pt} 
h2{ font-family: "黑体 "; font-size:15pt; } 
.invert{ filter: invert} 
div{width:300} 
一 > 
</style> 
</head> 
<body> 
<h2> 下 面 是 对 同样 的 图 像 使 用 了 反 相 效果 </h2> 
<table border=1 bordercolor="#660000" cellpadding=5 width=660 align="center"> 
<tr height=30 align="center"> 
<td width=330> 原 图 </td> 
<td width=330> 反 相 效 果 </td> 
</tr> 
<tr height=260 align="center"> 
<td><img src="pic08.jpg"></td> 
<td><div class=invert><img src="pic08.jpg"></div></td> 
</tr> 
</table> 
</body> 
</html> 


运行 程序 ， 效 果 如 图 11-57 所 示 。 
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11.11.9 X 光 片 效果 一 一 xray 


xray 滤 镜 用 于 加 亮 对 象 的 轮廓 ， 呈 现 所 谓 的 “X” 光 片 。X 光 效 果 滤 镜 不 需要 设 定 参数 ， 是 一 种 很 
少见 的 滤 镜 。 它 可 以 像 灰色 滤 镜 一 样 去 除 图 像 的 所 有 颜色 信息 ， 然 后 将 其 反 转 〈 黑 白 像素 除外 ) 。 

语法 : filter: xray 

实例 代码 : 


<html> 
<head> 
<title>X 光 片 效果 </title> 
<style type="text/css"> 
玉 
body{ font-size:12pt} 
h2{ font-family: "黑体 "; font-size:15pt; } 
.xray{ filter: xray} 
div{width:300} 
一 > 
</style> 
</head> 
<body> 
<h2> 下 面 是 对 同样 的 图 像 使 用 了 xray 滤 镜 </h2> 
<table border=1 bordercolor="#660000" cellpadding=5 width=660 align="center"> 
<tr height=30 align="center"> 
<td width=330> 原 图 </td> 
<td width=330>X 光 片 效果 </td> 
</tr> 
<tr height=260 align="center"> 
<td><img src="pic08.jpg"></td> 
<td><div class=xray><img src="pic08.jpg"></div></td> 
</tr> 
</table> 
</body> 
</html> 


运行 程序 ， 效 果 如 图 11-58 所 示 。 
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11.11.10 ”人 遮 罩 效果 一 一 mask 


使 用 mask 滤 镜 可 以 为 对 象 建立 一 个 覆盖 于 表面 的 膜 。 该 滤 镜 将 可 看 见 的 像素 遮 珊 ， 将 看 不 见 的 像 
素 以 指定 的 颜色 显示 。 
语法 : filter:mask(color= 颜 色 代 码 ) 
说 明 : 这 里 的 颜色 是 最 后 遮 音 显示 的 颜色 ， 而 这 种 滤 镜 对 GIF 图 像 支持 得 最 好 。 
实例 代码 : 
<html> 
<head> 
<title> 庶 曾 效 果 </title> 
<style type="text/css"> 
hs 
body{ font-size:12pt} 
h2{ font-family: "黑体 "; font-size:15pt; } 
.mask{filter:mask(color=#FFAAO0O0)} 


一 > 
</style> 
</head> 
<body> 
<h2> 下 面 是 对 同样 的 图 像 使 用 了 和 遮 章 小 镜 </h2> 
<table border=1 bordercolor="#660000" cellpadding=5 width=660 align="center"> 
<tr height=30 align="center"> 
<td width=330> 原 图 </td> 
<td width=330> 遮 音效 果 </td> 
</tr> 
<tr height=260 align="center"> 
<td><img src="pic11.gif’></td> 
<td><img src="pic11.gif" class=mask></td> 
</tr> 
</table> 
</body> 
</html> 


运行 程序 ， 效 果 如 图 11-59 所 示 。 
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11.11.11 ”波形 滤 镜 一 一 wave 


波形 滤 镜 能 造成 一 种 强烈 的 变形 幻觉 ， 它 对 目标 对 象 生成 正弦 波 变形 。 实 际 上 ， 它 是 把 对 象 按 垂 
直 的 波形 样式 打 乱 。 

语法 : filter:wave( add= 参 数值 , freq= 参 数值 , lightstrength= 参 数值 , phase= 参 数值 ,strength= 参 数值 ) 

说 明 : 在 该 滤 镜 的 参数 中 ，add 表示 是 否 要 把 对 象 按照 波形 样式 打 乱 ， 默 认 是 true; freq 为 波纹 的 
频率 ， 也 就 是 指定 在 对 象 上 一 共 需 要 产生 多 少 个 完整 的 波纹 ; lightstrength 参数 设 定 对 于 波纹 增强 光影 
的 效果 ， 范 围 是 0~100; phase 参数 用 来 设置 正弦 波 的 偏 移 量 ; strength 用 于 设 定 振幅 。 

实例 代码 : 

<html> 

<head> 

<title> 产 生 波 形 效果 </title> 


<style type="text/css"> 
过 < 


body{ font-size:12pt} 

h2{ font-family: "黑体 "; font-size:15pt; } 

.Wavef filter: wave(add=false, freq=2,lightstrength=20,phase=5, strength=25)} 
.wave2{filter: wave(add=true, freq=3,lightstrength=180,phase=180,strength=80)} 


一 > 
</style> 
</head> 
<body> 
<h2> 下 面 是 对 同样 的 图 像 使 用 了 波形 滤 镜 </h2> 
<table border=1 bordercolor="#660000" cellpadding=5 width=660 align="center"> 
<tr height=30 align="center"> 
<td width=220> 原 图 </td> 
<td width=220> 产 生 波浪 的 效果 </td> 
<td width=220> 不 同 设置 的 波浪 效果 </td> 
</tr> 
<tr height=260 align="center"> 
<td><img src="pic09.jpg"></td> 
<td><img src="pic09.jpg" class=wave></td> 
<td><img src="pic09.jpg" class=wave2></td> 
</tr> 
</table> 


运行 程序 ， 效 果 如 图 11-60 所 示 。 
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前 面 介绍 了 在 页 面 中 插入 表单 的 方法 ,但 是 插入 表单 只 是 实现 了 交互 功能 中 
收集 信息 的 功能 ， 它 并 没有 真正 处 理 收集 的 这 些 信息 。 如 果 要 处 理 这 些 信息 ， 往 
往 要 用 到 脚本 语言 。 在 HTML 中 ， 最 常见 的 脚本 语言 就 是 JavaScript。 
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12.1 JavaScript 简介 


什么 是 JavaScript 


JavaScript 是 一 种 新 的 描述 语言 ， 可 以 被 嵌入 HTML 文件 之 中 。 它 是 一 种 基于 对 象 和 事件 驱动 ， 并 
具有 安全 性 能 的 脚本 语言 。 使 用 它 的 目的 是 与 HTML 超 文本 标记 语言 、Java 脚本 语言 一 起 实现 在 一 个 
Web 页 面 中 链接 多 个 对 象 ， 与 Web 客户 交互 作用 ， 从 而 可 以 开发 客户 端的 应 用 程序 等 。 

透 过 JavaScript 可 以 回应 使 用 者 的 需求 事件 〈 如 : form 的 输入 ) 而 不 需要 通过 网 络 来 回 传输 资料 。 
简单 地 说 ， 当 一 位 使 用 者 输入 一 项 信息 时 ， 不 需要 先 将 信息 传 给 服务 器 处 理 ， 再 传 回来 ， 而 是 可 以 直 
接 被 客户 端的 程序 处 理 。 


2 人 之 


JavaScript 特点 


JavaScript 的 出 现 弥 补 了 HTML 语言 的 缺陷 , 它 是 Java 与 HTML 折衷 的 选择 , 具有 以 下 几 个 特点 : 


口 


口 


口 


人 .3 


JavaScript 是 一 种 脚本 编写 语言 ， 采 用 小 程序 段 的 方式 实现 编程 ， 也 是 一 种 解释 性 语言 ， 提 供 
了 一 个 简易 的 开发 过 程 。 它 与 HTML 标 识 结 合 在 一 起 ， 从 而 方便 用 户 的 使 用 操作 。 
JavaScript 是 一 种 基于 对 象 的 语言 ， 同 时 也 可 以 看 作 是 一 种 面向 对 象 的 语言 。 这 意味 着 它 能 运 
用 自己 已 经 创建 的 对 象 , 因此 许多 功能 可 以 来 自 于 脚本 环境 中 对 象 的 方法 与 脚本 的 相互 作用 。 
JavaScript 具 有 简单 性 。 首 先 它 是 一 种 基于 Java 基 本 语句 和 控制 流 之 上 的 简单 而 紧凑 的 设计 ， 
其 次 它 的 变量 类 型 采用 弱 类 型 ， 并 未 使 用 严格 的 数据 类 型 。 

JavaScript 是 一 种 安全 性 语言 ， 它 不 允许 访问 本 地 硬盘 ， 并 且 不 能 将 数据 存 入 到 服务 器 上 ， 不 
允许 对 网 络 文档 进行 修改 和 删除 ， 只 能 通过 浏览 器 实现 信息 浏览 或 动态 交互 ， 从 而 有 效 地 防 
止 数据 的 丢失 。 

JavaScript 是 动态 的 ， 它 可 以 直接 对 用 户 或 客户 输入 作出 响应 ， 无 须 经 过 Web 服 务 程序 。 它 对 
用 户 的 反映 响应 ， 是 采用 以 事件 驱动 的 方式 进行 的 。 所 谓 事件 驱动 ， 就 是 指 在 主页 中 执行 了 
某 种 操作 所 产生 了 动作 ， 从 而 触发 相应 的 事件 响应 。 

JavaScript 具 有 跨 平台 性 。 它 依赖 于 浏览 器 本 身 ， 与 操作 环境 无 关 ， 只 要 能 运行 浏览 器 并 支持 
JavaScript 浏 览 器 的 计算 机 就 能 正确 执行 。 


一 个 简单 的 JavaScript 实例 


在 HTML 中 插入 JavaScript 代码 的 基本 语法 如 下 : 


<Script Language ="JavaScript"> 
JavaScript 语言 代码 ; 
JavaScript 语言 代码 ; 


</Script> 
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说 明 : 通过 标识 <Script>、</Scrip 忆 指明 在 标记 中 柑 入 的 是 脚本 语言 ; 通过 设置 Language 属性 的 值 
为 JavaScript 说 明 标 识 中 使 用 的 是 何 种 语言 。 
下 面 创 建 第 一 个 JavaScript 的 小 实例 ， 实 例 代码 如 下 : 


<html> 
<head> 
<title> 将 JavaScript 语言 脚本 嵌入 HTML 中 </title> 
<Script Language="JavaScript"> 
让 
document.write(" 第 一 个 JavaScript 的 小 实例 "); 
-> 
</Script> 
</head> 
<body> 
<Script Language="JavaScript"> 
< 
alert(" 弹 出 一 个 小 窗口 ") 
-> 
</Script> 
</body> 
</html> 


运行 这 段 代码 ,可 以 看 到 如 图 12-1 所 示 的 效果 。 由 这 一 实例 可 以 看 出 ,<Script> 标 记 可 以 放 在 HTML 
文件 中 的 任何 地 方 ， 包 括 头 部 和 主体 等 。 
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第 一 个 JavaScript 的 小 实例 


八 弹出 一 个 小 窗口 


图 12-1 程序 运行 效果 
12.2 JavaScript 的 基本 语法 


JavaScript 脚本 语言 同 其 他 语言 一 样 ， 有 基本 的 数据 类 型 、 表 达 式 和 算术 运算 符 以 及 程序 的 基本 框 
架 结构 。JavaScript 提供 了 4 种 基本 的 数据 类 型 用 来 处 理 数字 和 文字 ， 而 变量 是 用 于 提供 存放 信息 的 地 
方 ， 表 达 式 则 可 以 完成 较 复杂 的 信息 处 理 。 
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人 :21 常量 


JavaScript 的 常量 通常 又 称 字面 常量 ， 它 是 不 能 改变 的 数据 ， 主 要 包括 如 下 几 种 : 

口 整 型 常量 : 可 以 使 用 十 六 进 制 、 八 进 制 和 十 进 制 表示 其 值 。 

口 “ 实 型 常量 : 由 整数 部 分 加 小 数 部 分 表示 ， 如 12.32、193.98。 可 以 使 用 科学 或 标准 方法 表示 ， 
如 5E7、4e5 等 。 

口 布尔 值 : 只 有 两 种 状态 ,true 或 false。 主 要 用 来 说 明 或 代表 一 种 状态 ， 从 而 判断 下 一 步 的 操作 。 

口 字符 型 常量 : 使 用 单 引号 (') 或 双 引 号 〈") 引起 来 的 一 个 或 几 个 字符 。 如 "This is JavaScript"、 
'3245'、"ew231" 等 。 

口 空 值 ， 在 JavaScript 语 言 中 有 一 个 空 值 null， 表 示 什 么 也 没有 。 如 果 试 图 引用 没有 定义 的 变量 ， 
就 会 返回 一 个 null 值 。 

口 ”特殊 字符 : JavaScript 中 有 些 以 反 斜 杠 ( / ) 开头 的 不 可 显示 的 特殊 字符 , 通常 称 为 控制 字符 。 


各 注意 : 在 JavaScript 中 是 区 分 大 小 写 的 , 例如, 其 中 的 布尔 值 tue 和 false 要 使 用 小 写 , 如 果 写 成 True 
或 False 是 错误 的 。 


12.2.2 ”变量 


变量 的 主要 作用 是 存 取 数 据 、 提 供 存放 信息 的 容器 。 变 量 可 分 为 全 局 变量 和 局 部 变量 ， 通 常 声 明 
于 函数 (Function) 内 的 都 属于 局 部 变量 ， 在 Script 标记 内 及 函数 外 的 则 属于 全 局 变量 ， 局 部 变量 只 有 
在 函数 内 可 以 存 取 ， 而 全 局 变量 则 不 受 限制 。 
给 JavaScript 中 的 变量 命名 要 注意 以 下 几 点 : 
口 ”必须 是 一 个 有 效 的 变量 ， 即 变量 以 字母 开头 ， 中 间 可 以 出 现 数字 ， 如 testl 、text2 等 。 除 下 划 
线 〈-) 作为 连 字符 外 ， 变 量 名 称 不 能 有 空格 、 加 号 (+) 、 减 号 (-) 、 逗 号 〈,) 或 其 他 
符号 。 
口 “不 能 使 用 JavaScript 中 的 关键 字 作为 变量 。 在 JavaScript 中 定义 了 40 多 个 关键 字 (如 var、 int、 true 
等 ) 供 JavaScript 内 部 使 用 ， 不 能 作为 变量 名 称 。 
口 “在 对 变量 命名 时 ， 最 好 把 变量 的 意义 与 其 代表 的 意思 对 应 起 来 ， 以 免 出 现 错误 。 
在 JavaScript 中 ， 变 量 可 以 使 用 var 关 键 字 在 使 用 前 先 作 声明 ， 并 可 赋值 。 例 如 : 
var myname; 
此 处 定义 了 一 个 名 为 myname 的 变量 ， 但 没有 赋值 。 
var myname="John Sanic"; 
此 处 定义 了 一 个 名 为 myname 的 变量 ， 同 时 赋予 其 值 为 John Scnic。 
变量 也 可 以 不 作 声明 ， 在 使 用 时 再 根据 数据 类 型 直接 确定 变量 类 型 ， 如 : 
x=100; 
2 
tip=true; 
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其 中 x 为 整数 ，y 为 字符 串 ，tip 为 布尔 型 。 
在 为 变量 赋值 时 ， 可 以 添加 HTML 中 的 标记 语言 ， 下 面 通过 实例 说 明 变 量 的 使 用 方法 ， 实 例 代 码 
如 下 : 


<html> 
<head> 
<title> 使 用 变量 </title> 
<style> 
到 = 
h2{ffontfamily: "黑体 "; font-size: 16pt} 
body{font-size: 12pt} 
-> 
</style> 
<Script language="JavaScript"> 
<! 一 
examword=" 欢 迎 学 习 JavaScript"; 
secword="<p> 通 过 JavaScript 脚本 语言 ， 能 让 页 面 效果 变 得 更 加 绚丽 多 彩 </p>" 
-> 
</Script> 
</head> 
<body> 
<h2> 下 面 显示 的 是 定义 的 变量 值 : </h2> 
<Script Language="JavaScript"> 


区 


document.write(examword); EE | 
document.write(secword); a 
-> 下 面 显示 的 叮 定义 的 变 红 入: 
</Script> 
</body> Jevsscrip* 生 本 滞 育 ， 能 入 页 而 由 六 变 浊 更 加 约 而 乡 简 
</html> 
[E> Ei om 
运行 程序 ,效果 如 图 12-2 所 示 。 可 以 看 出 ,在 页 面 中 成 功 地 显示 了 本 
前 面 使 用 JavaSeript 定义 的 两 个 变量 的 值 。 
12.2.3 ”运算 符 


运算 符 是 用 于 完成 操作 的 一 系列 符号 ， 在 JavaScript 中 包括 算术 运算 符 〈 如 +、-、*、/ 等 ) 、 比 较 
运算 符 〈 如 二、 一 等 ) 、 逻 辑 布 尔 运算 符 (如! ) 以 及 字符 串 运算 符 〈 如 +=) 。 
在 JavaScript 中 主要 有 双 目 运算 符 和 单 目 运算 符 。 双 目 运算 符 的 基本 写法 如 下 : 
操作 数 1 运算 符 操作 数 2 
可 以 看 出 双 目 运算 符 由 两 个 操作 数 和 一 个 运算 符 组 成 ， 如 50-40、?"this"+"that" 等 。 而 单 目 运算 符 
只 需 一 个 操作 数 ， 其 运算 符 可 在 前 或 后 ， 如 ++1。 
口 ”算术 运算 符 : JavaScript 中 的 算术 运算 符 有 单 目 运算 符 和 双 目 运算 符 。 其 中 ， 双 目 运算 符 主要 
包括 +〈 加 ) 、- ( 减 ) 、* ( 乘 ) 、/ ( 除 ) 、%( 取 模 ) 。 单 目 运算 符 主要 包括 一 〈 取 反 ) 、 
~( 取 补 ) 、++《〈 递 加 1) 、-- (递减 1) 。 
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口 “比较 运算 符 : 比较 运算 的 基本 操作 过 程 是 首先 对 其 操作 数 进行 比较 , 再 返回 一 个 te 或 false 值 。 
在 JavaScript 中 的 运算 符 主要 包括 <〈 小 于 ) 、> (大 于 ) 、<= (小 于 等 于 ) 、>= (大 于 等 于 ) 、 
一 (等于) 、!= (不 等 于 ) 。 

口 逻辑 运算 符 ， 逻辑 运算 符 也 称 为 布尔 运算 符 ， 主 要 包括 ! ( 取 反 ) 、&&& (逻辑 与 ) 、]( 逻 
辑 或 ) 。 

实例 代码 : 


<html> 
<head> 
<title> 使 用 JavaScript 进行 计算 </title> 
<style> 
oe 
h2{ffont-family: "黑体 "; font-size: 16pt} 
body{font-size: 12pt} 
-> 
</style> 
</head> 
<body> 
<h2> 下 面 显示 各 种 类 型 的 运算 结果 : </h2> 
<Script Language="JavaScript"> 


<! 一 
document.write(" 算 术 运 算 中 的 加 法 5+7 的 结果 : "); 
document.write(5+7); 
document.write("<br>"); 
document.write(" 比 较 运算 35>=36 的 结果 是 : "); 
document.write(35>=36); 马 使 用 Java5crpt 进 行 计算 - Micosaft Internet Explasi 了 辣 | 
document.write("<br>"); ee 2 | 
ite(" 逻 辑 运 ， 只， + -+ 全 | 我 雪人 加 | *” 
documentwrite( "加 多 运算 nieBafaleg 村 [pre em 
document.write(true&&false); 加 
= 下 面 显示 各 种 类 型 的 运算 结果 : 
</Script> 算 木 运算 中 的 加 法 5+7 的 结果 ，12 
ody> 人 
</html> 
a 了 _ J 
运行 程序 ， 效 果 如 图 12-3 所 示 。 BE 加 
图 12-3 ”使 用 运算 符 进 行 计算 
12.2.4 ”表达 式 


在 定义 完 变 量 后 ， 就 可 以 对 它们 进行 赋值 、 改 变 、 计 算 等 一 系列 操作 ， 完 成 这 一 过 程 的 操作 就 需 
要 使 用 表达 式 。 可 以 说 ， 表 达 式 就 是 变量 、 常 量 、 布 尔 及 运算 符 的 集合 ， 因 此 表达 式 可 以 分 为 算术 表 
述 式 、 字 符 表达 式 、 赋 值 表达 式 以 及 布尔 表达 式 等 。 

此 外 还 有 一 种 表达 式 称 为 条 件 表 达 式 ， 它 通过 判断 一 个 条 件 是 否 符合 来 设置 相应 的 显示 结果 ， 表 
达 式 的 写法 如 下 : 

(条 件 ) ? 结果 1: 结果 2 
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若 条 件 的 结果 值 为 真 ， 则 表述 式 的 结果 为 1， 否 则 为 2。 
实例 代码 : 


<html> 
<head> 
<title> 使 用 表达 式 </title> 
<style> 
<!— 
h2{font-family: "黑体 "; font-size: 16pt} 
body{font-size: 12pt} 
--> 
</style> 
</head> 
<body> 
<h2> 下 面 应 用 JavaScript 中 的 表达 式 : </h2> 
<Script Language="JavaScript"> 
<!— 
exam1=(3+6>8)?"yes":"no"; 
exam2=(3+6<8)?"yes":"no"; 


document.write(" 判 断 3+6>8 是 否 正确 ， 如 果 正 确 输出 yes， 否 则 输入 no: <br>"); 


document.write(exam1); 
document.write("<br><br>"); 


document.write(" 判 断 3+6<8 是 否 正确 ， 如 果 正 确 输出 yes， 否 则 输入 no: <br>"); 


document.write(exam2); 
-> 

</Script> 

</body> 

</html> 


运行 程序 ， 效 果 如 图 12-4 所 示 。 
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Mi 


正清 ， 各 昌 正 尖 区 ty 


基业 3re<3 是 否 正 消 ， 如 条 正光 多 diye=， 否 列 簿 入 now 
引 
Be Bim 


图 12-4 使 用 表达 式 的 效果 


12.2.5 ”基本 语句 


275。 


在 任何 一 种 语言 中 ， 程 序 控制 流 是 必须 的 ， 它 能 使 得 整个 程序 减 小 混乱 ， 使 之 顺利 按 一 定 的 方式 


执行 。 下 面 是 JavaScript 常用 的 程序 控制 流 语 句 。 
1. ielse 条 件 语句 


if-else 语句 是 JavaScript 中 最 基本 的 控制 语句 ， 通 过 它 可 以 改变 语句 的 执行 顺序 。 表 达 式 中 必须 使 
用 关系 语句 来 实现 判断 ， 它 作为 一 个 布尔 值 来 计算 ， 可 以 将 零 和 非 零 的 数 分 别 转化 成 false 和 true。 
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基本 格式 如 下 : 
这 表述 式 ){ 
执行 语句 1; 


elsef 
执行 语句 2 
} 


说 明 : 当 表 达 式 的 值 为 tue， 则 执行 语句 1， 否 则 执行 语句 2。 若 让 后 的 语句 有 多 行 ， 则 必须 使 用 
花 括号 将 其 括 起 来 。 

论语 句 可 以 嵌 套 使 用 ， 从 而 实现 更 加 复杂 的 判断 ， 其 语法 如 下 : 

这 布尔 值 或 布尔 表达 式 ) 语 句 1; 

else( 布 尔 值 或 布尔 表达 式 ) 语 句 2; 

else 这 布尔 值 或 布尔 表达 式 ) 语 句 3; 

else 语句 4; 

说 明 : 在 这 种 情况 下 ， 每 一 级 的 布尔 表述 式 都 会 被 计算 ， 若 某 一 级 布尔 表达 式 为 真 ， 则 执行 其 后 
面相 应 的 语句 ， 和 否则 向 下 判断 。 如 果 一 直到 最 后 的 布尔 表达 式 都 为 假 ， 则 执行 else 后 的 语句 。 

实例 代码 : 


<html> 
<head> 
<title> 使 用 if-else 条 件 语句 </title> 
<style> 
<!— 
h2{ffont-family: "黑体 "; font-size: 16pt} 
body{font-size: 12pt} 
--> 
</style> 
</head> 
<body> 
<h2> 标 准 体重 的 测试 </h2> 
标准 体重 (公斤 ) 二 身高 (厘米) 一 105<br><br> 
假如 体重 为 66 公斤 ， 身 高 169 厘米 ， 那 么 这 个 人 的 体重 是 否 超重 呢 ? <br> 
<Script Language="JavaScript"> 
<! 一 
weight=66; 
height=169; 
standard=height-105; 
judge=(weight-standard)*100/standard; 
document.write(" 计 算 结 果 : 体重 超出 标准 体重 的 百分比 为 "); 
document.write(judge); 
if (judge>20) 
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document.write("<br> 偏 胖 ， 要 注意 减肥 "); 
else if (udge<-20) 

document.write("<br> 偏 着 ， 注 意 增加 营养 "); 
else 

document.write("<br> 体 型 标准 ， 注 意 保持 "); 


运行 程序 ， 效 果 如 图 12-5 所 示 。 


图 12-5 使 用 让 else 语句 判断 


2. for 循环 语句 
for 语句 用 于 实现 条 件 循 环 ， 即 当 条 件 成 立时 ， 执 行 语句 集 ， 否 则 跳出 循环 体 。 
基本 格式 : 

for( 初 始 化 ;条 件 ; 增 量 ) 


说 明 : 初始 化 参数 告诉 循环 的 开始 位 置 ， 必 须 赋予 变量 初 值 ， 条 件 是 用 于 判别 循环 停止 时 的 条 件 ， 
若 条 件 满 足 ， 则 执行 循环 体 ， 和 否则 跳出 循环 ， 增 量 主要 定义 循环 控制 变量 在 每 次 循环 时 按 什么 方式 变 
化 。 在 3 个 主要 语句 之 间 ， 必 须 使 用 分 号 〈;) 分 隔 。 

例如 : 

for(i=0;i<10;i++) { 


x[ij= i; 


} 

说 明 : 初始 值 二 0， 条件 i<10( 也 就 是 从 0-9) ; it+ 表 示 计 it1， 也 就 是 递增 值 为 1。 这 段 代 码 表 
示 从 0 开始 每 次 递增 1 给 数组 x 中 赋值 ， 一 直到 i 为 10 跳出 循环 。 

实例 代码 : 

<html> 

<head> 

<title> 使 用 for 语句 计算 累积 的 和 </title> 


<style> 
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l= 
body{font-size: 12pt} 
-> 
</style> 
</head> 
<body> 
计算 从 1 到 10 的 和 : 
<Script Language="JavaScript"> 


<! 一 
sum=0; 
for(i=1;i<11;it+) 
sum=sum+ti 
document.write(sum); 计算 从 1 到 10 的 和 ， 55 
-> 
</Script> 
Slbedy> E23 nm = 
i 图 12-6 使 用 for 语 句 计 算 和 


运行 程序 ， 效 果 如 图 12-6 所 示 。 
3. while 循环 

该 语句 与 for 语句 一 样 ， 当 条 件 为 真 时 ， 重 复 循环 ， 否 则 退出 循环 。 
基本 格式 : 


说 明 : 在 while 语句 中 ， 条 件 语句 只 有 一 个 ， 当 条 件 不 符合 时 跳出 循环 。 
它 与 for 语句 的 主要 区 别 在 于 : 使 用 for 语句 在 处 理 有 关 数 字 时 更 易 看 懂 ， 也 较 紧 凑 
环 对 复杂 的 语句 效果 更 特别 。 

4. break 语句 
使 用 break 语句 可 以 使 循环 从 for 或 while 中 跳出 。 
基本 语法 : break: 
说 明 : 当 程 序 遇 到 break 语句 时 ， 会 跳出 循环 并 执行 下 一 条 语句 。 
实例 代码 : 
<html> 
<head> 
<title> 使 用 break 语句 跳出 循环 </title> 
<style> 

ds 

body{font-size: 12pt} 

i 
</head> 
<body> 


; 而 while 循 
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从 1 开始 输出 整数 ， 当 循环 到 能 被 7 整除 时 跳出 循环 ， 否 则 输出 到 20<br><br> 
<Script Language="JavaScript"> 


<I— 
for(i=1;i<21;i++X 
if(i%7==0) 
break; 
document.write(i+"&nbsp;&nbsp;") 
} 
-> 刁 
</Script> 人 当 体 环 到 能 被 7 荡 除 对 号 出 条 
</body> 
</html> 
运行 程序 ， 效 果 如 图 12-7 所 示 ，i=7 时 符合 跳出 条 件 ， 因 此 不 ” ”于 ER 
再 输出 ， 程 序 只 输出 1 到 6 的 数字 。 图 12-7 ”使 用 break 语句 跳出 循环 


S. continue 语句 

使 用 continue 语句 则 使 程序 跳 过 循环 内 剩余 的 语句 而 进入 下 一 次 循环 。 

基本 语法 : continue; 

将 上 一 个 实例 中 的 break 语句 更 改 为 continue 语句 ， 运 行 实例 的 效果 如 图 12-8 所 示 。 


wo | FT 


内 1 开始 输出 可 娄 ， 当 全 不 3 宦 
as4sen8s1w0umyssys lm 


EE [i 


图 12-8 ”使 用 continue 语句 结束 当前 一 次 的 循环 
由 图 12-8 可 以 看 出 ， 当 遇 到 continue 语句 时 并 不 跳出 整个 循环 ， 只 是 结束 当前 的 这 一 次 循环 ， 因 
此 当 7 和 i=14 时 并 不 跳出 循环 ， 而 是 进入 下 一 轮 循环 中 ， 因 此 输出 的 是 除去 能 被 7 整除 的 7 和 14 
以 外 的 从 1 到 20 的 数字 。 
6.switch 语句 


当 判 断 条 件 比较 多 时 ， 为 了 使 程序 更 加 清晰 ， 可 以 使 用 switch 语句 。 使 用 switch 语句 时 ， 表 达 式 
的 值 将 与 每 个 case 语句 中 的 常量 作 比 较 。 如 果 相 匹配 , 则 执行 该 case 语句 后 的 代码 ; 如 果 没 有 一 个 case 
的 常量 与 表达 式 的 值 相 匹配 , 则 执行 default 语句 。 当 然 ,default 语句 是 可 选 的 。 如 果 没 有 相 匹 配 的 case 
语句 ， 也 没有 default 语句 ， 则 什么 也 不 执行 。 
基本 语法 : 
switch (表达 式 ) { 
case 值 1: 
语句 1; 
break:; 
case 值 2: 
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default: 
语句 N; 


} 

下 面 通过 一 个 实例 说 明 switch 语句 的 使 用 方法 。 给 定 一 组 成 绩 ， 判 断 成 绩 的 等 级 。 如 果 小 于 60 分 
则 为 不 及 格 ; 60~69 分 为 及 格 ; 70~79 分 为 普通 ; 80~89 分 为 较 好 ，90 分 以 上 则 设置 为 优秀 。 实 例 代 码 
如 下 : 


<html> 
<head> 
<title> 使 用 switch 语句 </title> 
<style> 
bs 
body{font-size: 12pt} 
-> 
</style> 
</head> 
<body> 
判断 下 面 同学 成 绩 的 等 级 :<br> 
75&nbsp;&nbsp;88&nbsp;&nbsp;56&nbsp;&nbsp;99&nbsp;&nbsp;62&nbsp;&nbsp;<br><br> 
<Script Language="JavaScript"> 
hs 
var mark= new Array(); 
mark[1]=75; 
mark[2]=88; 
mark[3]=56; 
mark[4]=99; 
mark[5]=62; 
for(i=1,i<6;,i++){ 
switch(parselnt(mark[i]/10)X 
case 0: 
val=" 不 及 格 "; 
break; 
case 1: 
val=" 不 及 格 "; 
break; 
Case 2: 
val=" 不 及 格 "; 
break; 
case 3: 
val=" 不 及 格 "; 
break; 
case 4: 
val=" 不 及 格 "; 
break; 
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case 5: 
Val=" 不 及 格 "; 
break; 

case 6: 
val=" 及 格 "; 
break; 

case 7: 
val=" 普 通 "; 
break; 

case 8: 
val=" 较 好 "; 
break; 

case 9: 
val=" 优 秀 "; 
break; 

case 10: 
val=" 优 秀 "; 
break; 


} 
document.write(mark[i]+"&nbsp;: &nbsp;"+val+"<br>") 
} 


-> 
</Script> 
</body> 
</html> 
在 该 实例 中 ， 通 过 var 定义 了 数组 变量 mark[i]， 通 过 parseInt() 函 数 对 数组 的 值 进行 取 整 ， 然 后 判 
断 它 的 值 ， 如 果 小 于 6 则 说 明 数 组 的 值 小 于 60， 因 此 设置 为 “不 及 格 ”， 依 此 类 推 。 运 行程 序 ， 效 果 
如 图 12-9 所 示 。 


Al Qu em Hus gS 
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图 12-9 使 用 switeh 语句 判断 成 绩 等 级 
名 注意 : 在 该 实例 中 使 用 了 new() 创 建 数组 ; 使 用 了 parseInt() 方 法 进行 取 整 。 


12.2.6 ”函数 
通常 在 进行 一 个 复杂 的 程序 设计 时 ， 总 是 根据 所 要 完成 的 功能 ， 将 程序 划分 为 一 些 相 对 独立 的 部 


分 , 每 部 分 编写 一 个 函数 , 从 而 使 各 部 分 充分 独立 , 任务 单一 , 程序 清晰 , 易 懂 、 易 读 、 易 维护 。JavaScript 
函数 由 关键 字 function 定义 ， 通 过 指 定 函 数 名 〈 实 参 〉 来 调用 一 个 函数 。 函 数 可 以 封装 在 程序 中 可 能 
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要 重复 使 用 的 模块 中 ， 并 可 作为 事件 驱动 的 结果 而 调用 。 关 于 事件 ， 在 后 面 的 内 容 中 将 作 有 具体 讲解 。 
在 JavaScript 中 ， 函 数 定义 的 方法 如 下 : 
function 函数 名 (参数 ,变量 ){ 
函数 体 ; 
retum 表达 式 ; 
} 
说 明 : 在 这 一 语法 中 ， 函 数 名 用 于 定义 函数 名 称 ; 参数 是 传递 给 函数 使 用 或 操作 的 值 ， 其 值 可 以 
是 常量 、 变 量 或 其 他 表达 式 ; return 则 用 于 设 定 函 数 的 返回 值 。 
在 JavaScript 中 ， 函数 名 对 大 小 写 是 敏感 的 ,也 就 是 JavaScript 中 的 函数 名 区 分 大 小 写 , 如 New 和 
new 是 不 同 的 两 个 函数 。 


12.3 JavaScript 对 象 


JavaScript 可 以 根据 需要 创建 自己 的 对 象 ， 从 而 进一步 扩大 其 应 用 范围 。JavaScript 中 的 对 象 是 由 
属性 和 方法 两 个 基本 元 素 构成 的 。 前 者 是 对 象 在 实施 其 所 需要 行为 的 过 程 中 ， 实 现 信息 的 装载 单位 ， 
从 而 与 变量 相关 联 ， 后 者 是 指 对 象 能 够 按照 设计 者 的 意图 而 被 执行 ， 从 而 与 特定 的 函数 关联 。 


12.3.1 ”对象 属性 的 引用 


对 于 对 象 的 属性 ， 可 以 通过 3 种 方法 进行 引用 。 下 面 举 例 说 明 ， 假 如 city 是 一 个 已 经 存在 的 对 象 ， 
而 name 和 date 则 是 它 的 两 个 属性 ， 如 果 要 对 这 两 个 属性 赋值 ， 可 以 采用 如 下 3 种 方法 : 
口 使 用 点 运算 符 : 
city.name=" 宁 波 "; 
口 city.date="1998"; 
口 通过 对 象 的 下 标 实现 引用 : 通过 数组 形式 的 访问 属性 ， 可 以 使 用 循环 操作 获取 其 值 。 
city[0]= "宁波 "; 
city[1]= "1998"; 
function show(object){ 
for 4=0j<2; j++) 
document.write(object[j]) 


} 
口 通过 字符 串 的 形式 实现 : 
city["name"]=" 宁 波 "; 


city["date"]="1998"; 
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12.3.2 ”对 象 方法 的 使 用 


在 对 象 中 除了 使 用 属性 外 ， 有 时 还 需要 使 用 方法 。 在 JavaScript 中 对 象 方法 的 引用 非常 简单 。 在 对 
象 的 定义 中 使 用 了 This.meth=FunctionName 语句 ， 实 质 上 对 象 的 方法 就 是 一 个 函数 FunctionName。 
其 语法 : 
对 象 名 .方法 名 ()= 函 数 名 0 
然后 再 定义 函数 的 具体 功能 即 可 实现 对 象 方法 的 定义 。 
如 果 要 直接 调用 已 知 对 象 的 方法 ， 可 以 直接 使 用 点 运算 符 。 例 如 要 调用 math 对 象 中 的 cos0 方 法 ， 
可 以 使 用 如 下 代码 : 


document.write(math.cos(35)) 


document.write(math.sin(80)) 
12.3.3 浏览 器 的 内 部 对 象 


使 用 浏览 器 的 内 部 对 象 系统 ， 可 实现 与 HTML 文档 进行 交互 。 它 的 作用 是 将 相关 元 素 组 织 包 装 起 
来 ， 提 供给 程序 设计 人 员 使 用 ， 从 而 减轻 编程 人 员 的 劳动 ， 提 高 设计 Web 页 面 的 能 力 。 浏 览 器 的 内 部 
对 象 主要 包括 以 下 几 个 : 
口 浏览 器 对 象 (navigator) : 提供 有 关 浏览 器 的 信息 。 
口 “文档 对 象 〈document) : document 对 象 包含 了 与 文档 元 素 (elements) 一 起 工作 的 对 象 ， 它 将 
这 些 元 素 封装 起 来 供 编程 人 员 使 用 。 
口 ”窗口 对 象 (windows) : window 对 象 处 于 对 象 层次 的 最 顶端 ， 它 提供 了 处 理 navigator 窗 口 的 方 


法 和 属性 。 
口 位 置 对 象 location) : location 对 象 提供 了 与 当前 打开 的 URL 一 起 工作 的 方法 和 属性 ， 它 是 一 
个 静态 的 对 象 。 


口 ”历史 对 象 (history) : history 对 象 提供 了 与 历史 清单 有 关 的 信息 。 

利用 这 些 对 象 可 以 对 浏览 器 环境 中 的 事件 进行 控制 和 处 理 。 在 JavaScript 中 提供 了 非常 丰富 的 内 部 
方法 和 属性 ， 从 而 减轻 了 编程 人 员 的 工作 ， 提 高 了 编程 效率 。 在 这 些 对 象 系统 中 ， 文 档 对 象 属于 非常 
重要 的 ， 它 位 于 最 底层 ， 但 对 实现 Web 页 面 信息 交互 起 着 关键 作用 ， 因 而 它 是 对 象 系统 的 核心 部 分 ， 
下 面具 体 介 绍 这 些 对 象 的 常用 属性 和 方法 。 

1. navigator 对 象 

navigator 对 象 可 用 来 存 取 浏览 器 的 相关 信息 ， 其 常用 属性 见 表 12-1。 


表 12-1 _ navigator 对 象 的 常用 属性 


属 性 说 了 明 
appName 浏览 器 的 名 称 


浏览 器 的 版 本 
浏览 器 的 代码 名 称 
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续 表 
属 性 说 了 明 
browserLanguage 浏览 器 所 使 用 的 语言 。 如 zh-cn 表 示 中 文 、en 表 示 英 文 等 
plugins 可 以 使 用 的 插件 信息 
platform 浏览 器 系统 所 使 用 的 平台 ， 如 Win32 等 
cookieEnabled 浏览 器 的 cookie 功 能 是 否 打 开 
实例 代码 : 
<html> 
<head> 
<title> 调 用 navigator 对 象 的 属性 </title> 
<style> 
<!— 
body{font-size: 12pt} 
--> 
</style> 
</head> 
<body> 


测试 您 所 使 用 的 浏览 器 名 称 、 版 本 及 系统 平台 : <br><br> 


<Script Language="JavaScript"> 

l= 

document.write(" 您 所 使 用 的 浏览 器 名 称 为 :"+navigator.appName+"<br>") 
document.write(" 浏 览 器 所 使 用 的 语言 为 : "+navigator.browserLanguage+"<br>") 
document.write(" 您 所 使 用 的 浏览 器 版 本 为 : "+navigatorappVersion+"<br>") 

=-> 

</Script> 


</body> 
</html> 


运行 程序 ， 效 果 如 图 12-10 所 示 。 


图 12-10 ”使 用 navigator 对 象 


2. document 对 象 
JavaScript 是 基于 对 象 的 脚本 编程 语言 ， 它 的 输入 输出 是 通过 对 象 来 完成 的 ， 其 中 输出 可 通过 


document 对 象 实现 。 在 document 中 主要 有 links、anchor 和 form 3 个 最 本 


口 


口 


的 对 象 。 

anchor 锚 对 象 : 它 是 指 <A name=…> </A> 标 识 在 HTML 源 码 中 存在 时 产生 的 对 象 , 它 包 含 着 文 
档 中 所 有 的 anchor 信 息 。 

links 链 接 对 象 : 是 指 用 <A hre 伍 …> </A> 标 记 链 接 一 个 超 文本 或 超 媒体 的 元 素 作为 一 个 特定 
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的 URL。 

口 ”fom 窗 体 对 象 : 是 文档 对 象 的 一 个 元 素 , 它 含 有 多 种 格式 的 对 象 储存 信息 , 使 用 它 可 以 在 JavaScript 
脚本 中 编写 程序 进行 文字 输入 ， 并 可 以 用 来 动态 改变 文档 的 行为 。 通 过 document.Forms[] 数 组 来 
使 得 在 同一 个 页 面 上 可 以 有 多 个 相同 的 窗 体 ， 使 用 forms[] 数 组 要 比 使 用 窗 体 名 字 方 便 得 多 。 

document 对 象 有 以 下 方法 : 

口 输出 显示 write() 和 writeln(): 该 方法 主要 用 来 实现 在 Web 页 面 上 显示 输出 信息 。 


全 注意 : writeln0 与 write() 的 惟一 不 同 之 处 在 于 在 末尾 加 了 一 个 换行 符 ; 为 了 正常 显示 其 输出 信息 ， 必 
须 指明 <pre> </pre> 标 记 ， 使 之 告诉 编辑 器 ; 输出 的 文档 类 型 ， 可 以 由 浏览 器 中 有 效 的 合法 文 
本 类 型 所 确定 。 


口 关闭 文档 流 close0: 在 多 个 文档 对 象 中 ， 必 须 使 用 close0 来 关闭 一 个 对 象 后 ， 才 能 打开 另 一 个 
文档 对 象 。 

口 ”清除 文档 内 容 clear0): 用 于 清除 文档 中 的 内 容 。 

实例 代码 : 


<html> 

<head> 

<title> 使 用 document 对 象 </title> 

</head> 

<body> 

<form name="mytable"> 

请 输入 数据 : 

<Input Type="text" Name="text1" Value=""> 
</form> 

<A name="Link1" href="02var.htm"> 链 接 到 第 一 个 文本 </a>&nbsp;&nbsp;&nbsp; 
<A href="03.htm"> 链 接 到 第 二 个 文本 </a>&nbsp;&nbsp;&nbsp; 

<A href="04.htm"> 链 接 到 第 三 个 文本 </a><br><br> 

<Script Language="JavaScript"> 

document.write(" 本 页 面 有 "+document.links.length+" 个 链接 "+"&nbsp;&nbsp;"); 
document.write(" 有 "+document.anchors.length+" 个 锁 "+"&nbsp;&nbsp;"); 


document.write(" 面 有 "+document.forms.length+" 个 窗 体 "); 
</Script> 
<lbody> 个 让 村 和 人 
<htm> NS 
运行 程序 ， 效 果 如 图 12-11 所 示 。 , 
EEC IE Ll = | 

3. window 对 象 12-11 使 用 document 对 象 
window 对 象 处 于 对 象 层 次 的 最 顶端 ， 它 提供 了 处 理 navigator 窗 

口 的 方法 和 属性 。JavaScript 的 输出 可 通过 document 对 象 的 方法 来 完成 ， 而 输入 则 可 以 通过 window 对 


象 来 实现 。window 对 象 常用 的 方法 主要 见 表 12-2。 


。286。 


方 ” 法 
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表 12-2 ”window 对 象 的 常用 方法 


方法 的 含义 及 参数 说 明 


open(url,windowName,parameterlist) 


创建 一 个 新 窗口 ，3 个 参数 分 别 用 于 设置 URL 地 址 、 窗 口 名 称 和 窗口 
打开 属性 一般 可 以 包括 宽度 、 高 度 、 定 位 、 工 具 栏 等 ) 


close|) 关闭 一 个 窗口 
alert(text) 弹出 式 窗口 ，text 参 数 为 窗口 中 显示 的 文字 
confirm(text) 弹出 确认 域 ，text 参 数 为 窗口 中 的 文字 


promt(text,defaulttext) 


弹出 提示 框 , text 为 窗口 中 的 文字 , defaulttext 参 数 用 来 设置 默认 情况 
下 显示 的 文字 


moveBy( 水 平 位 移 ,垂直 位 移 ) 将 窗口 移 至 指定 的 位 移 
moveTo(x,y) 将 窗口 移动 到 指定 的 坐标 
resizeBy( 水 平 位 移 ,垂直 位 移 ) 按 给 定 的 位 移 量 重新 设 定 窗口 大 小 
resizeTo(x, 将 窗口 设 定 为 指定 大 小 
back0) 页 面 的 后 退 

forward 页 面前 进 

home 返回 主页 

stop 停止 装载 网 页 

print() 打印 网 页 

status 状态 栏 信息 

location 当前 窗口 URL 信 息 


下 面 以 一 个 实例 来 说 明 window 对 象 的 功能 ， 实 例 代码 如 下 : 


<html> 

<head> 

<title> 使 用 window 对 象 </title> 
</head> 

<body> 


在 该 页 面 将 会 依次 弹出 确认 窗口 以 及 一 个 新 的 页 面 。 


<Script Language="JavaScript"> 


< 


confirm(" 确 定 要 显示 页 面 内 容 么 ?"); 


window.open("exam.html","newwindow","width=450,height=220,toolbar=no,menubar=no,scrollbars=yes"); 


--> 
</Script> 
</body> 
</html> 


运行 程序 ， 效 果 如 图 12-12 所 示 。 


单 击 “ 确 定 ” 按 钮 会 继续 打开 页 面 的 内 容 ， 即 弹出 新 的 页 面 ， 如 图 12-13 所 示 。 
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本 合用 wncov 对 皇 _ iooscft Internet Explorer 二 村 
| 兰 笑 加。 坦 丰 WD 收 帝 包工 具 D。 大 是 | 
[3 3 Mr Mcosoft Internet Explorer alx| > 


地 址 (0) | 乔 ] DbockiD9 Htmi 源 立 任 1212window html 


J 8 IE 


在 该 页 面 将 会 依次 弹出 确认 窗口 以 及 一 个 新 的 页 面 
到 
@) 确定 要 显示 页 面 为 容 么 ? 


Ce 


| 丙 正 在 打开 同 Rhhe:jD hook Hi 王 交 人 


习 


sl 


| 
[| 轩 


图 12-12 使 用 window 对 象 弹出 确认 窗口 12-13 ”新 打开 一 个 页 面 窗口 


4. location 对 象 


location 对 象 是 一 个 静态 的 对 象 ， 它 描述 的 是 某 一 个 窗口 对 象 所 打开 的 地 址 。 要 表示 当前 窗口 的 地 
址 ， 只 需要 使 用 location 即 可 ; 若 要 表示 某 一 个 窗口 的 地 址 ， 就 使 用 “窗口 对 象 .location”。 
名 注意: 属于 不 同 协议 或 不 同 主机 的 两 个 地 址 之 间 不 能 互相 引用 对 方 的 location 对象， 这 是 出 于 安全 
性 的 需要 。 例 如 ， 当 前 窗口 打开 的 是 地 址 为 al.html 的 下 面 的 某 一 页 ， 另 外 一 个 窗口 (对象 名 
为 : winb ) 打开 的 是 b2.html 网 页 。 如 果 在 当前 窗口 使 用 winb.location， 就 会 出 现 出 错 信息 : 


“没有 权限 ”。 


location 对 象 常用 的 属性 见 表 12-3。 


表 12-3 ”常用 的 location 属 性 


属 性 实现 的 功能 

rotocol 返回 地 址 的 协议 ， 取 值 为 'http:、'https:'"、'file:' 等 

和 返回 地 址 的 主机 名 ， 例 如 “http://www.microsoft.com/china/” 的 地 址 主机 名 为 
www.microsoft.com 

port 返回 地 址 的 端口 号 ， 一 般 http 的 端口 号 是 80 

host 返回 主机 名 和 端口 号 ， 如 www.a.com:8080 

pathname 返回 路 径 名 ， 如 “http://www.a.com/b/c.html” 的 路 径 名 为 b/c.html 

ji 返回 “#” 以 及 以 后 的 内 容 ， 如 地 址 为 c.html#chapter4， 则 返回 #chapter4; 如 果 地 址 
里 没有 “#”， 则 返回 空 字符 串 

Search 返回 “?” 以 及 以 后 的 内 容 ， 如 果 地 址 里 没有 “?”， 则 返回 空 字符 串 

href 返回 整个 地 址 ， 即 返回 在 浏览 器 的 地 址 栏 上 显示 的 内 容 


location 对 象 常用 的 方法 主要 包括 : 

口 reload0: 相当 于 Internet Explorer 浏 览 器 上 的 “刷新 ”功能 。 

口 ”replace0: 打开 一 个 URL， 并 取代 历史 对 象 中 当前 位 置 的 地 址 。 用 这 个 方法 打开 一 个 URL 后 ， 
单 击 浏览 器 的 “后 退 ” 按 钮 将 不 能 返回 到 刚才 的 页 面 。 

下 面 通过 实例 来 介绍 location 对 象 的 使 用 方法 ， 实 例 代 码 如 下 : 


<html> 
<head> 
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<title> 使 用 location 对 象 </title> 
</head> 
<body> 
使 用 location 对 象 设置 新 链接 窗口 的 路 径 : <br> 
<form> 
<Input type="button" Value=" 打 开 新 的 页 面 " onclick="window.location.href='exam.html';"> 
</form> 
<br><br> 
下 面 返 回 本 页 面 地 址 的 协议 和 路 径 名 <br><br> 
<Script Language="JavaScript"> 
<!— 
document.write(" 本 页 地 址 的 协议 是 :“"); 
document.write(location.protocol); 
document.write("<br> 本 页 面 地 址 的 路 径 名 是 :“"); 
document.write(location.pathname); 
-> 
</Script> 
</body> 
</html> 


提示 : onclick 是 一 个 触发 事件 , 表示 单 击 鼠 标 时 进行 的 处 理 程序 ,在 后 面 的 章节 中 还 将 细致 讲解 。 
运行 程序 ， 效 果 如 图 12-14 所 示 。 


TH 


SE .Bs 


图 12-14 location 对 象 的 使 用 方法 


5. history 对 象 

history 对 象 是 指 浏览 器 的 浏览 历史 ， 其 最 主要 的 属性 就 是 length， 用 于 设 定 历史 的 项 目 数 ， 也 就 
是 JavaScript 历史 中 用 浏览 器 的 “前 进 ”、“ 后 退 ” 按 钮 可 以 到 达 的 范围 。 

history 对 象 常用 的 方法 主要 包括 : 

口 back(0: 后 退 ， 与 单 击 “ 后 退 ” 按 钮 是 等 效 的 。 

口 forward0: 前 进 ， 与 单 击 “ 前 进 ” 按 钮 是 等 效 的 。 

口 go0: history.go(x) 实 现在 历史 的 范围 内 到 达 一 个 指定 地 址 。 如 果 x<0， 则 后 退 x 个 地 址 ， 如 果 

x>0， 则 前 进 x 个 地 址 ， 如 果 x==0， 则 刷新 现在 打开 的 网 页 。 
下 面 通过 一 个 实例 来 说 明 history 对 象 的 使 用 方法 ， 实 例 代码 如 下 : 
<html> 


<head> 
<title> 使 用 history 对 象 </title> 
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</head> 
<body> 
使 用 history 对 象 访问 浏览 历史 <br><br> 


<form> 
<Input type="button" Value=" 后 退 到 上 一 个 历史 记录 "onclick="history.go(-1)"><br><br> 


<Input type="button" Value=" 前 进 到 下 一 个 历史 记录 " onclick="history.go(1)"><br><br> 
<Input type="button" Value=" 刷 新 本 页 面 " onclick="history.go(0)"> 


下 使 用 history 对 象 - Microsoft Internet Explorer 


=|gjx| 
上 文件 日 。 轴 回 昌 ”查看 收 大 的。 工具 DD 下 册 HD 

| + -了 -上 国 四 全 | 仙 环 负 收 天 洛 覃 体 过 | 司 " 雪 菩 ” ” 
[Htkew) [e] :woonos temnsource i anistory hem 可 Oma 
使 用 hi story 对 象 访问 浏览 历史 - 

后 退 到 上 一 个 历史 记录 

前 进 到 下 一 个 历史 记录 

出 新 本 页 面 

加 
Bia mE a 


图 12-15 使 用 history 对 象 访问 历史 记录 


12.4 JavaScript 事件 


12.4.1 事件 简介 


JavaScript 是 基于 对 象 的 语言 ， 而 基于 对 象 的 基本 特征 就 是 采用 事件 驱动 。 通 常 鼠 标 或 键盘 的 动作 
称 之 为 事件 ， 而 由 鼠标 或 键盘 的 动作 引发 的 一 连 串 程序 动作 ， 称 之 为 事件 驱动 。 对 事件 进行 处 理 的 程 
序 或 函数 称 为 事件 处 理 程序 。 在 JavaScript 中 ,对象 的 事件 处 理 通常 由 函数 实现 。 事件 处 理 程序 的 语法 


与 函数 一 样 ， 因 此 也 可 以 直接 将 函数 作为 事件 处 理 程序 。 
事件 处 理 程序 的 基本 语法 如 下 : 
function 事件 处 理 名 (参数 表 ){ 
事件 处 理 语句 集 ; 


在 调用 事件 处 理 程序 时 的 基本 语法 如 下 : 
事件 驱动 = 处 理 程序 


说 明 : 在 等 号 后 , 可 以 使 用 自己 编写 的 函数 作为 事件 处 理 程序 ， 也 可 以 使 用 JavaScript 中 内 部 的 函 


数 ， 还 可 以 直接 使 用 JavaScript 的 代码 等 。 
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JavaScript 事件 驱动 中 的 事件 是 通过 鼠标 或 键盘 动作 引发 的 ， 主 要 包括 单 击 事件 


F (onClick) 、 改 变 


事件 (onChange) 、 选 中 事件 (onSelect) 、 获 得 焦点 事件 (onFocus) 、 失 去 焦点 事件 (onBlur) 、 载 
入 文件 事件 (onLoad) 、 务 载 文件 事件 (onUnload) 、 鼠 标 覆 盖 事 件 (onMouseOver) 、 鼠 标 离开 事件 


(onMouseOut) 。 下 面 对 这 些 事件 逐一 进行 讲解 。 


12.4.2 单 击 事件 一 一 onClick 


onClick 事件 是 JavaScript 中 最 常见 的 事件 之 一 。 用 户 单 击 鼠 标 按键 时 可 产生 onClick 事件 ， 同 时 


onClick 指定 的 事件 处 理 程序 或 代码 将 被 调用 执行 。 


实例 代码 : 


<html> 

<head> 

<title> 单 击 事件 </title> 

</head> 

<body> 

使 用 onClick 设置 单 击 事件 的 处 理 程序 <br> 
<form> 


<Input type="button" Value=" 打 开 页 面 "onclick="window.open(exam.html',newwindow，， 
width=450,height=220,toolbar=no,menubar=no,scrollbars=yes');"> 


</form> 
</body> 
</html> 


运行 程序 ， 单 击 页 面 中 的 “打开 页 面 ”按钮 ， 可 以 打开 一 个 名 为 exam.html 的 页 面 ， 如 图 12-16 所 示 。 
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图 12-16 设置 单 击 事件 


12.4.3 ”改变 事件 一 一 onChange 


当 text 或 textarea 元 素 内 的 字符 值 改变 或 Select 表格 选项 状态 改变 时 发 生 该 事件 。 


实例 代码 如 下 : 
<html> 
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<head> 
<title> 改 变 事件 onChange</title> 
</head> 
<body> 
使 用 onChange 设置 改变 状态 的 事件 处 理 程序 <br> 
<form> 
<p> 留 言 : <br></p> 
<textarea name="word" rows=5 cols=70 value=" " onchange=alert(" 您 在 文本 框 中 添加 了 新 的 内 容 ")> 
</textarea> 
</form> 
</body> 
</html> 


运行 程序 后 ， 在 文本 框 中 添加 任意 文字 后 单 击 其 他 位 置 ， 会 弹出 添加 文字 的 警告 提示 窗口 ， 效 果 
如 图 12-17 所 示 。 
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图 12-17 改变 事件 onChange 的 效果 


12.4.4 ”选中 事件 一 一 onSelect 


当 text 或 textarea 对 象 中 的 文字 被 选中 时 会 引发 该 事件 。 


实例 代码 : 
<html> 
<head> 
<title> 选 中 事件 onSelect </title> 
</head> 
<body> 
使 用 onSelect 设置 选中 文本 的 事件 处 理 程序 <br> 
<form> WR) RD 
<Input type="text" Value=" 文 字 信息 " onSelect=alert(" 您 选 DE Ceoot po Hernearce N17orneet he 
中 了 文本 框 中 的 文字 ")> pe 习 
ns 使 用 onSclect 讼 首选 中 文本 的 事件 处 理 程序 
os 原 到 一 一 本 
i /DN rT 


运行 程序 ， 选 中 文本 框 中 的 部 分 或 全 部 文字 可 以 弹出 提 
示 选 中 了 文本 的 警告 提示 窗口 ， 如 图 12-18 所 示 。 


图 12-18 选中 事件 onSelect 的 效果 
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12.4.5 ”获得 焦点 事件 一 一 onFocus 


当 用 户 单 击 text 或 textarea 以 及 select 对 象 时 ， 即 将 光标 落 在 文本 框 或 选择 框 时 会 产生 该 事件 。 
实例 代码 : 


<html> 

<head> 

<title> 焦 点 事件 onFocus</title> 

<Script Language="JavaScript"> 

ss 

function befocus(){ 

alert(" 我 被 激活 ， 成 为 了 输入 焦点 "); 

} 

一 > 

</Script> 

</head> 

<body> 

使 用 onFocus 设置 输入 焦点 的 事件 处 理 程序 <br><br> 

选择 一 种 证 件 名 称 : 

<form> 

<select name="cardtype" onFocus="befocus()"> 
<option value="id_card" selected> 身 份 证 
<option value="stu_card"> 学 生 证 
<option value="drive_card"> 驾 驶 证 
<option value="other_card"> 其 他 证 件 
</select> 

</form> 

</body> 

</html> 


运行 程序 后 ， 单 击 下 拉 列 表 框 时 会 弹出 一 个 警告 提示 窗口 ， 效 果 如 图 12-19 所 示 。 


图 12-19 ”获得 焦点 事件 onFocus 的 效果 


12.4.6 ”失去 焦点 事件 一 一 onBlur 


失去 焦点 事件 正好 与 获得 焦点 事件 相对 ， 当 text 对 象 、textarea 对 象 或 select 对 象 不 再 拥有 焦点 而 
退 到 后 台 时 ， 引 发 该 事件 。 
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实例 代码 : 


<html> 
<head> 
<title> 失 去 焦点 事件 onBlur<jtitle> 
</head> 
<body> 
使 用 onBlur 设置 失去 焦点 事件 的 处 理 程序 <br><br> 
<form> 
<p> 用 户 名 : 
<input name="username" type="text" size=20 onBlur=confirm(" 确 定 “ 用 户 名 ”文本 框 失去 焦点 ? ")> 
</p> 
<p> 登 录 密 码 : 
<input name="password" type="password" size=20 onBlur= confirm(" 确 定 “ 登 录 密码 ”文本 框 失 去 焦 
点 ? "> 


</p> 
</form> 
</body> 
</html> 
运行 程序 ， 将 光标 移动 到 任意 一 个 文本 框 内 ， 然 后 再 将 光标 移 至 其 他 位 置 ， 此 时 会 弹出 确认 窗口 。 


文本 框 后 的 效果 。 
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图 12-20 失去 焦点 onBlur 的 效果 


12.4.7 载 入 文件 事件 一 一 onLoad 


当 页 面 文件 载 入 时 ， 产 生 该 事件 。onLoad 事件 的 一 个 作用 就 是 在 首次 载 入 一 个 页 面 文件 时 检测 
cookie 的 值 , 并 用 一 个 变量 为 其 赋值 , 使 它 可 以 被 源 代码 使 用 。 本 事件 是 window 的 事件 , 但 是 在 HTML 
中 指定 事件 处 理 程序 时 ， 一 般 把 它 写 在 <body> 标 记 中 。 

实例 代码 : 


<html> 

<head> 

<title> 载 入 文件 事件 onLoad</title> 

</head> 

<body onLoad=alert(" 正 在 载 入 页 面 ， 请 耐心 等 待 .…")> 
</body> 

</html> 
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运行 程序 ， 效 果 如 图 12-21 所 示 。 
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图 12-21 
12.4.8 ”和 拖 载 文件 事件 一 一 onUnload 


秋 载 文件 事件 onUnload 与 载 入 文件 事件 正好 相反 ， 
新 cookie 的 状态 。 

实例 代码 ; 

<html> 

<head> 

<title> 和 扼 载 文 件 事 件 onUnload</title> 

</head> 

<body onUnload=confirm(" 您 确定 要 离开 本 页 面 么 ? ")> 

</body> 

</html> 


运行 程序 后 ， 当 要 关闭 该 页 面 时 会 弹出 提示 对 话 框 ， 效 果 如 图 12-22 


所 示 。 


12.4.9 鼠标 覆盖 事件 一 一 onMouseOver 


载 入 页 面 的 效果 


它 是 当 Web 页 面 退出 时 引发 的 事件 ， 并 可 更 


民 
DE 


Cj _™ | 
图 12-22 离开 页 面 的 效果 


鼠标 窗 盖 事件 onMouseOver 是 当 鼠 标 位 于 元 素 〈 如 按钮 》 上 方 时 所 引发 的 事件 。 


实例 代码 : 


<html> 

<head> 

<title> 鼠 标 覆盖 事件 onMouseOver<jtitle> 
</head> 

<body> 


将 鼠标 放 在 下 面 的 按钮 上 可 以 改变 浏览 器 的 状态 栏 : <br><br> 


<form> 


<input type="button" value=" 改 变 页 面 状态 栏 " 


onmouseover="window.status=' 快 来 看 看 我 是 不 是 变 了 ^_A:return true"> 


</form> 
</body> 
</html> 
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运行 程序 ， 效 果 如 图 12-23 所 示 ， 此 时 状态 栏 的 文字 为 “完毕 ”; 当 鼠 标 位 于 按钮 上 方 时 ， 状 态 
栏 上 的 文字 发 生 了 变化 ， 效 果 如 图 12-24 所 示 。 
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hip) [ET horn vetsourel ra22orMase Over ini =] | 


将 鼠标 放 在 下 面 的 按钮 上 可 以 改变 浏览 器 的 状态 - 司 
栏 ， 沟 则 村 多 在 下 而 的 接 钮 上 可 以 改变 浏览 器 的 状态 
故 变 四 状 坟 习 a 
习 加 | 
[SE 本 = 司 | | 到 
图 12-23 运行 程序 的 效果 图 12-24 状态 栏 发 生 了 变化 


12.4.10 ”鼠标 离开 事件 一 一 onMouseOut 


鼠标 离开 事件 onMouseOut 是 当 鼠 标 离开 元 素 时 引发 的 事件 。 如 果 它 和 鼠标 覆盖 事件 同时 使 用 , 可 
以 创建 动态 按钮 的 效果 。 
实例 代码 : 


<html> 

<head> 

<title> 鼠 标 覆 盖 事 件 onMouseOver</title> 

<Script Language="JavaScript"> 

<|-- 

function a(X{ 
eval("image").src="button0.png"; 
event.srcElement.src="button1.png” 

} 

function b(X 
eval("image").src="button1.png"; 
event.srcElement.src="button2.png” 

一 > 

</Script> 

</head> 

<body> 

动态 按钮 的 效果 : 

<img id="image" src="button0.png" onMouseOver="a()" onMouseOut="b()"> 

</body> 

</html> 


运行 程序 ， 打 开 页 面 的 效果 如 图 12-25 所 示 ; 当 和 鼠标 覆盖 图 像 上 方 和 离开 图 像 上 方 时 ， 效 果 分 别 
如 图 12-26 和 图 12-27 所 示 。 
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图 12-25 ”运行 程序 的 效果 图 12-26 和 鼠标 覆盖 的 效果 图 12-27 鼠标 离开 的 效果 


12.4.11 ”其 他 事件 


JavaScript 中 还 提供 了 一 些 其 他 事件 , 这 里 不 再 一 一 列举 。 下 面 通过 表 12-4 对 不 同 功能 的 事件 进行 
简单 描述 。 
表 12-4 JavaScript 中 的 一 些 常用 事件 


一 般 事 件 
事件 描述 
onDblClick 鼠标 双击 事件 
onMouseDown 鼠标 上 的 按键 被 按 下 时 激活 的 事件 
onMouseUp 鼠标 按 下 后 ， 松 开 鼠 标 时 触发 的 事件 
onMouseMove 鼠标 移动 时 触发 的 事件 
onKeyPress 当 键 盘 上 的 某 个 键 被 按 下 并 且 释 放 时 触发 的 事件 ， 要 求 页 面 内 必须 有 激活 的 对 象 
onKeyDown 当 键 盘 上 某 个 按键 被 按 下 时 触发 的 事件 ， 要 求 页 面 内 必须 有 激活 的 对 象 
onKeyUp 当 键盘 上 某 个 按键 被 放 开 时 触发 的 事件 ， 要 求 页 面 内 必须 有 激活 的 对 象 
页 面相 关 事件 
事 件 描述 
onAbort 图 片 在 下 载 时 被 用 户 中 断 
onBeforeUnload 当前 页 面 的 内 容 将 要 被 改变 时 触发 的 事件 
onError 捕 提 当前 页 面 因为 某 种 原因 而 出 现 的 错误 ， 如 脚本 错误 
onMove 浏览 器 的 窗口 被 移动 时 触发 的 事件 
onResize 当 浏览 器 的 窗口 大 小 被 改变 时 触发 的 事件 
onScroll 浏览 器 的 滚动 条 位 置 发 生变 化 时 触发 的 事件 
onStop 浏览 器 的 “停止 ”按钮 被 按 下 或 者 正在 下 载 的 文件 被 中 断 时 触发 的 事件 
表单 相关 事件 
事件 描述 
onReset 当 表 单 中 reset 属 性 被 激活 时 触发 的 事件 
onSubmit 一 个 表单 被 递交 时 触发 的 事件 
滚动 字幕 事件 
事件 描 述 
onBounce 当 Marquee 内 的 内 容 移动 至 Marquee 显 示范 围 之 外 时 触发 的 事件 
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续 表 
滚动 字幕 事件 
事 件 描述 
onFinish 当 Marquee 元 素 完成 需要 显示 的 内 容 后 触发 的 事件 
onStart 当 Marquee 元 素 开始 显示 内 容 时 触发 的 事件 
编辑 事件 
事件 描 述 
onBeforeCopy 当 页 面 当前 的 被 选择 内 容 将 要 复制 到 浏览 者 系统 的 前 贴 板 前 触发 的 事件 
onBeforeUpdate 当 浏览 者 粘贴 系统 剪贴 板 中 的 内 容 时 通知 目标 对 象 


当 按 下 鼠标 右键 出 现 菜单 时 或 者 通过 键盘 的 按键 触发 页 面 菜 单 时 触发 的 事件 ， 例 如 


onContextMenu 
在 页 面 的 <body> 中 加 入 onContentMenu="retum false" 可 禁止 使 用 鼠标 右键 
onCopy 当 页 面 当前 被 选择 内 容 被 复制 后 触发 的 事件 
onCut 当 页 面 当前 被 选择 内 容 被 剪 切 时 触发 的 事件 
onPaste 当 内 容 被 粘贴 时 触发 的 事件 
onDrag 当 某 个 对 象 被 拖 动 时 触发 的 事件 
onDragEnd 当 鼠 标 拖 动 结束 时 触发 的 事件 ， 即 鼠标 的 按键 被 释放 时 触发 的 事件 
数据 绑 定 
事件 描述 
onAfterUpdate 当 数 据 完成 由 数据 源 到 对 象 的 传送 时 触发 的 事件 
onCellChange 当 数 据 来 源 发 生变 化 时 触发 的 事件 
onDataAvailable 当 数据 接收 完成 时 触发 的 事件 


onDatasetChanged 数据 在 数据 源 发 生变 化 时 触发 的 事件 
onDatasetComplete 当 数 据 源 的 全 部 有 效 数据 读 取 完毕 时 触发 的 事件 


onErrorUpdate 当 使 用 onBeforeUpdate 事 件 触发 取消 了 数据 传送 时 ， 代 替 onAfterUpdate 事 件 
onRowEnter 当前 数据 源 的 数据 发 生变 化 并 且 有 新 的 有 效 数据 时 触发 的 事件 
onRowExit 当前 数据 源 的 数据 将 要 发 生变 化 时 触发 的 事件 
onRowsDelete 当前 数据 记录 将 被 删除 时 触发 的 事件 
onRowslInserted 当前 数据 源 将 要 插入 新 数据 记录 时 触发 的 事件 
外 部 事件 

事件 描述 
onAfterPrint 当 文档 被 打印 后 触发 的 事件 
onBeforePrint 当 文档 即将 打印 时 触发 的 事件 
onHelp 当 浏览 者 按 下 F1 键 或 者 单 击 浏览 器 中 的 “帮助 ”按钮 时 触发 的 事件 


12.5 ”利用 JavaScript 制作 特效 


实际 上 , 在 创建 网 页 时 
利用 JavaScript 程序 编写 的 
要 对 代码 进行 适当 的 修改 。 


第 利用 JavaScript 制作 一 些 特效 ， 从 而 为 页 面 增添 活力 。 本 节 将 介绍 一 些 


常用 特效 ， 这 些 特效 可 以 直接 粘贴 到 网 页 代码 的 头 部 或 主体 内 ， 可 以 根据 需 
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提示 : 本 书 只 给 出 JavaScript 的 特效 代码 ， 而 网 页 内 容 的 代码 不 影响 其 效果 ,这 里 不 提供 网 页 内 容 
的 代码 ， 读 者 可 以 直接 将 代码 复制 到 自己 的 页 面 中 加 以 利用 。 对 于 特效 中 的 文字 、 颜 色 等 ， 可 以 根据 
需要 进行 修改 。 
12.5.1 动态 显示 时 间 


在 很 多 网 页 上 都 能 显示 当前 的 时 间 ， 这 主要 是 通过 调用 浏览 器 中 附带 的 计时 器 (setTimeout) 来 实 
现 的 。 如 果 设 定 了 每 一 段 时 间 更 新 一 次 网 页 ， 就 可 以 同时 刷新 页 面 的 时 间 。 实 例 代码 如 下 : 


<html> 

<head> 

<title> 在 页 面 的 状态 栏 动态 显示 时 间 </title> 

</head> 

<body onLoad="showtime();" onunload="clearTimeout(tID);"> 
在 状态 栏 上 显示 了 当前 时 间 

<Script Language="JavaScript"> 

var gtime; 


function showtime() { 
var now = new Date(); 
<-- 取 得 当前 小 时 、 分 、 秒 -> 
var hours = now.getHours(); 
var minutes = now.getMinutes(); 
var seconds = now.getSeconds(); 
var timeValue = "现在 是 "+((hours >= 12) ? "下 午 " : "上 午 " ); 
timeValue +=((hours >12) ? hours -12 :hours); 
timeValue += "点 "+ minutes + "分 "+ seconds + " 秒 "; 
window.status = timeValue; 


< 每 1000 毫秒 更 新 一 次 ~ Pe 
gtime = setTimeout("showtime()",1000); 一 + 7 因 是 分 | 全 六 妇 悦 由 当天 好 捉 什 对 | 
} | cr ea 
</Script> 在 杭 志 栏 上 量 示 了 当前 时 间 四 
</body> 
</html> 
i a a 9 
运行 程序 ， 可 以 看 到 如 图 12-28 所 示 的 效果 。 EE | 


图 12-28 在 状态 栏 显示 当前 时 间 
12.5.2” 随 鼠标 移动 的 图 像 


随 鼠标 移动 的 图 像 是 一 种 特殊 的 动态 鼠标 效果 ， 一 般 会 有 一 些 动态 图 像 跟随 鼠标 运动 。 读 者 可 以 
直接 调用 JavaScript 的 代码 来 设置 鼠标 效果 ， 具 体 代码 如 下 : 


<html> 

<head> 

<title> 跟 随 鼠 标的 图 像 </title> 
</head> 

<body> 

<Script Language="JavaScript"> 
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var newtop=0 <-- 新 的 上 边缘 坐标 -> 

var newleft=0 <-- 新 的 左边 缘 坐 标 -> 

layerStyleRef= "layer.style."; 

layerRef="document.all"; 

styleSwitch=".style"; 

function doMouseMove() ”< 一 响应 鼠标 的 移动 --> 

{ 
layerName = 'picture' 
eval(var curElement="+layerRef+'[" "+layerName+' "]') 
eval(layerRef+'[" "+layerName+' "]'+styleSwitch+'.visibility="hidden" ') 
eval('curElement'+styleSwitch+'.visibility="visible" ') 
eval('newleft=document.body.clientWidth-curElement'+styleSwitch+'.pixelWidth') 
eval(newtop=document.body.clientHeight-curElement+styleSwitch+'.pixelHeight) 
eval(height=curElement+styleSwitch+'.height) 
eval(width=curElement'+styleSwitch+'.width ) 
width=parselnt(width) 
height=parselnt(height) 


if (event.clientX > (document.body.clientWidth - width)) 

{ 

newleft=document.body.clientWidth + document.body.scrollLeft width 
} 


else{newleft=document.body.scrollLeft + event.clientX} 


eval(curElement+styleSwitch+'.pixelLeft=newleft) 


if (event.clientY > (document.body.clientHeight - height)) 
{ 
newtop=document.body.clientHeight + document.body.scrollTop - height 
} 
else 
{ 
newtop=document.body.scrollTop + event.clientY 
} 
eval(curElement+styleSwitch+'.pixelTop=newtop) 
document.onmousemove = doMouseMove; 
document.write("<img ID=picture src='pic01.gif Style="position:absolute; TOP:0pt;LEFT:Opt; 
Z-INDEX:2; visibility:hidden;'>") 
</Script> 
</body> 
</html> 
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运行 程序 ， 效 果 如 图 12-29 所 示 。 


图 12-29 随 鼠 标 运动 的 图 像 


12.5.3 ”禁止 鼠标 右 击 


在 一 些 网 页 上 ， 当 用 户 单 击 鼠 标 右键 时 会 弹出 警告 窗口 或 者 直接 没有 任何 反应 。 这 种 功能 可 以 使 
用 如 下 代码 实现 : 


<html> 

<head> 

<title> 禁 止 鼠 标 右键 单 击 </title> 

<Script Language="javascript"> 

< 一 设置 警告 窗口 一 > 

function click() { 

if (event.button==2) { 

alert( 警告 窗口 的 内 容 ) 

< 一 如 果 alert 的 内 容 为 空 ， 那 么 在 右 击 时 就 会 没有 任何 反应 -> 
} 


} 
< 一 调用 定义 的 函数 --> 
document.onmousedown=click 


</Script> SEE 
</head> 本 页 面 大 止 使 用 也 标 右 妊 

<body> ree | 
本 页 面 禁止 使 用 鼠标 右键 CO 
</body> 
</html> Cr Sm 
运行 程序 ， 效 果 如 图 12-30 所 示 。 图 12.30 禁止 包 标 右键 


12.5.4 ”设置 链接 文字 的 自动 变色 


如 果 一 个 页 面 的 链接 文字 不 停 地 变换 颜色 ， 那 么 该 链接 一 定 会 吸引 到 用 户 的 注意 。 实 现 方法 也 很 
简单 ， 代 码 如 下 : 

<html> 

<head> 

<title> 设 置 链 接 文 字 的 自动 变色 </title> 


</head> 
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<body bgcolor="#DDCCDD"> 
<Script Language="JavaScript"> 
<--/ 判 断 颜色 的 个 数 --> 
function initArray() { 
for (vari = 0; i < initArray.arguments.length; i++) { 
this[i] = initArray.argumentsi[i]; 


this.length = initArray.arguments.length; 

} 

var colors = new initArray("coral","darkcyan", 

"darkorchid","black","orange","darkgreen","cornsilk","coral"); 

<-- 设 置 变化 的 时 间 一 > 

delay = 0.5; 

<-- 设 置 链接 文字 的 变色 效果 一 > 

link = 0; 

vlink = 0; 

function linkDance() { 
link = (link+1)%colors.length; 
vlink = (vlink+1)%colors.length; 
document.linkColor = colors[link]; 
document.vlinkColor = colors[vlink]; 
setTimeout("linkDance()",delay*1000); 


linkDance(); 
</Script> 

<p> 查 看 链接 文字 的 颜色 : 

<p><a href="exam.html"> 会 变色 的 链接 文字 </a> 
</body> 
</html> 


运行 程序 ， 效 果 如 图 12-31 所 示 。 读 者 在 使 用 时 只 需要 将 <script> 标 记 和 </scrip 刀 标记 内 的 代码 复 

制 到 页 面 的 主体 部 分 〈 即 <body> 和 </body> 之 间 ) 即 可 。 而 不 同 的 颜色 设置 可 以 产生 不 同 的 变色 效果 。 
El 
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查看 链接 文字 的 颜色 。 | 
会 亚 色 的 链 搓 文字 


图 12-31 自动 变色 的 链接 文字 


12.5.5 ”显示 浏览 器 信息 


本 实例 使 用 JavaScript 制作 了 一 个 显示 浏览 器 信息 的 窗口 , 当 打开 页 面 之 后 , 在 页 面 项 部 的 表格 内 
就 会 出 现 关 于 用 户 浏览 器 的 详细 信息 。 下 面 就 来 看 一 下 这 个 实例 的 具体 实现 步骤 。 
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<script> 

function whatBrowser() 

‘ 
<!- 检 测 浏览 器 的 名 称 一 > 
document.Browser.Name.value=navigator.appName; 
<!- 检 测 浏览 器 的 版 本 号 -> 
document.Browser.Version.value=navigator.appVersion; 
< 检测 浏览 器 的 代码 名 称 -> 
document.Browser.Code.value=navigator.appCodeName; 
<!- 检 测 浏览 器 的 用 户 代理 标识 -> 
document.Browser.Agent.value=navigator.userAgent; 

} 

</script> 

<table border > 

<form name ="Browser"> 


<tr> 

<td> 浏 览 器 名 称 :</td> <!-- 在 表格 中 输出 浏览 器 的 名 称 --> 
<td><input type ="txt" name="Name" size="45"></td> 

</tr> 

<tr> 

<td> 版 本 号 :</td> <!-- 在 表格 中 输出 浏览 器 的 版 本 号 -> 
<td><input type="txt" name="Version" size="45"></td> 

</tr> 

<tr> 

<td> 代 码 名 称 :</td> <!-- 在 表格 中 输出 浏览 器 的 代码 名 称 --> 
<td><input type="txt" name="Code" size="45"></td> 

</tr> 

<tr> 

<td> 用 户 代理 标识 :</td> <!-- 在 表格 中 输出 浏览 器 的 用 户 代理 标识 --> 
<td><inpet type ="txt" name="Agent" size="45"></td> 

</tr> 

</form> 

</table> 

<body onLoad="whatBrowser()"> <!-- 调 用 whatB rowser() 函 数 --> 


所 示 。 


12-32 ”显示 浏览 器 的 详细 信息 
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12.5.6 ”显示 访客 登录 信息 的 窗口 


本 实例 使 用 JavaScript 制作 了 一 个 显示 访客 登录 信息 的 窗口 , 在 用 户 提示 框 内 输入 用 户 名 后 页 面 就 
会 显示 上 次 登录 的 详细 信息 。 下 面 就 来 看 一 下 这 个 实例 的 具体 实现 步骤 。 


<Script Language="JavaScript"> 


varexpDays = 10; <!-cookie 的 期 限 --> 
var exp = new Date(); <!-- 新 的 时 间 变 量 --> 
exp.setTime(exp.getTime() + (expDays*24*60*60*1000)); <!-- 过 期 的 日 期 --> 
function Who(info) <!-- 获 得 访问 者 的 昵称 --> 
{ 


<!-- 先 从 cookie 中 查找 visitorName 字段 -> 
var VisitorName = GetCookie(VisitorName') 
if (VisitorName == null) < 上 -如 果 没有 找到 ， 则 提示 用 户 输入 昵称 -> 
{ 
VisitorName = prompt(" 请 输入 你 的 昵称 :","); <!-- 弹 出 提示 窗口 --> 
<!-- 将 用 户 输入 的 昵称 写 入 cookie 中 --> 
SetCookie (VisitorName', VisitorName, exp); 


} 

return VisitorName; <!-- 返 回 用 户 的 昵称 -> 
} 
function When(info) <!-- 返 回 用 户 的 上 次 访问 时 间 一 > 
‘ 

var rightNow = new Date() <!-- 构 造 变量 --> 

var WWHTime = 0; 

WWHTime = GetCookie(WWhenH') <!- 从 cookie 中 获取 上 一 次 的 时 间 --> 


WWHTime = WWHTime * 1 

var lastHereFormatting = new Date(WWHTime); 

<!- 转 化 时 间 格 式 -> 

var intLastVisit = (lastHereFormatting.getYear() * 10000)+(lastHereFormatting.getMonth() * 100) + 
lastHereFormatting.getDate() 

varlastHerelnDateFormat = 


+lastHereFormatting; 


var dayOfWeek = lastHerelnDateFormat.substring(0,3) <!- 获 取 日 子 -> 
var dateMonth = lastHerelnDateFormat.substring(4,11) <!-- 获 取 日 期 --> 
var timeOfDay = lastHereInDateFormat.substring(11,16) <!-- 获 取 时 间 --> 
var year = lastHerelnDateFormat.substring(23,25) <!-- 获 取 年 份 --> 


<!- 按 日 、 月 、 年 重新 组 合 日 期 -> 

var WWHText = dayOfWeek + "&nbsp;" + dateMonth+ timeOfDay 
<!- 将 用 户 访问 时 间 和 过 期 时 间 均 写 入 cookie 中 --> 

SetCookie ("WWhenH", rightNow.getTime(), exp) 


return WWHText; 
人 Count(info) <!-- 返 回 用 户 上 站 次 数 --> 
| var WWHCount = GetCookie(WWHCount) ”<!-- 从 cookie 中 读 取 wwwhcount 字段 -> 
if (WWHCount == null) <!-- 如 果 返 回 值 为 空 -> 
WWHCount = 0; <!-- 上 站 次 数 为 0 一 > 
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else 


WWHCount++; <!- 否 则 ， 上 站 次 数 加 1--> 


} 
<!- 同 时 将 更 新 过 的 信息 写 入 cookie 中 --> 


SetCookie (WWHCount, WWHCount, exp); 
<!-- 返 回 上 站 次 数 --> 


return WWHCount; 
} 
function set() 
t 
VisitorName = prompt(" 请 输入 你 的 新 昵称 :","); <!-- 弹 出 窗口 ， 提 示 输 入 昵称 --> 
<!- 将 用 户 昵称 写 入 cookie 中 --> 
SetCookie (VisitorName', VisitorName, exp); 
SetCookie (WWHCount', 0, exp); <!-- 将 用 户 上 站 次 数 0 写 入 cookie 中 --> 
SetCookie (WWhenH', 0, exp); <!- 将 用 户 最 后 上 站 时 间 写 入 cookie 中 --> 
} 
function getCookieVal (offset) <!-- 返 回 cookie 中 一 定位 置 的 字段 --> 
ff 
<!- 获 取 指 定位 置 字段 的 未 尾 的 位 置 -> 
var endstr = document.cookie.indexOf (";", offset); 
if (endstr == -1) <!- 如 果 返 回 值 为 一 1--> 
endstr = document.cookie.length; <!-- 则 将 给 定位 置 后 的 所 有 字符 串 均 返回 -> 
<!- 返 回 字符 串 --> 
return unescape(document.cookie.substring(offset, endstr)); 
} 
function GetCookie (name) <!-- 从 cookie 中 获取 字段 的 值 -> 
var arg = name + "="; < 上 -变量 --> 
var alen = arg.length; < 上 -字段 的 长 度 --> 
<!--cookie 的 长 度 -> 


var clen = document.cookie.length; 


vari= 0; 
while (i < clen) <!- 在 cookie 中 一 > 
{ 
varj =i+ alen; <!-- 移 动 一 个 字段 的 宽度 --> 
if (document.cookie.substring(i, j) == arg) <!-- 如 果 是 待 找 字 段 --> 
return getCookieVal (j); <!-- 返 回 字 段 的 值 --> 
i= document.cookie.indexOf(" ", i) + 1; <!-- 更 新 i 的 值 --> 
if (1== 0) 
break; <!-- 如 果 找 完了 ， 返 回 --> 
} 
return null; 


function SetCookie (name, value) <!-- 向 cookie 中 写 入 --> 


人 var argv = SetCookie.arguments; <!-- 写 入 的 变量 数组 -> 
var argc = SetCookie.arguments.length; <!-- 变 量 的 个 数 --> 
<!- 变 量 数 组 中 的 第 二 个 表示 过 期 的 时 间 --> 
var expires = (argc > 2) ? argv[2] : null; 


var path = (argc > 3) ? argv[3] : null; <!-- 变 量 的 第 三 个 表示 路 径 --> 
var domain = (argc > 4) ? argv[4] : null; <!-- 变 量 的 第 四 个 表示 域 -> 
var secure = (argc > 5) ? argv[5] : false; <!-- 变 量 的 第 五 个 表示 权限 -> 


document.cookie = name + "=" + escape (value) + ((expires == null) ? "" : ("; expires=" 
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+expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == nul) ? "": ("; domain=" + 
domain)) + ((secure == true) ? "; secure" : " "); <L- 按 照 给 定 的 格式 写 入 cookie--> 


</Script> 

</head> 

<body> 

<Script Language="JavaScript"> 

document.write(" 您 好 <b>" + Who() + "</b>， 您 是 第 <b>" + Count() + "</b> 次 访问 本 主页 . <br> 最 后 一 次 是 
<b>" + When() +"</b>") 

document.write('<a href="JavaScript:set()">[ 按 此 改名 ]</a>') 
</Script> 

</body> 

<body> 

</body> 

</html> 


本 程序 实现 了 显示 访客 登录 信息 的 功能 ， 访 客 的 登录 信息 包括 访客 的 昵称 、 访 问 的 次 数 以 及 上 次 
访问 的 时 间 , 难点 主要 是 时 间 函 数 以 及 字符 串 函 数 的 使 用 方法 。 显 示 的 结果 如 图 12-33 和 图 12-34 所 示 。 


和 
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图 12-33 ”用 户 提示 框 图 12-34 ”显示 用 户 详细 信息 
12.5.7 ”标题 渐变 的 窗口 


本 实例 使 用 JavaScript 制作 了 一 个 标题 渐变 的 窗口 效果 , 当 页 面 被 打开 后 标题 就 会 按 由 大 到 小 再 到 
大 的 过 程 变化 。 下 面 就 来 看 一 下 这 个 实例 的 具体 实现 步骤 。 


<Script Language="JavaScript"> 


var speed = 2; <! 一 速度-> 

var cycledelay = 1000; < 上 -循环 周期 --> 
var maxsize = 48; <!-- 最 大 数目 --> 
varx=0; 

vary=0; 


var themessage, size; 
var esize ="". 


function initArray() <!-- 初 始 化 数组 -> 
{ 


this.length = initArray.arguments.length; 
for (var i = 0; i < this.length; i++) 


{ 
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this[i] = initArray.arguments[j]; 


} 
} 
var themessage2 = new initArray( < 上 -初始 化 矩阵 -> 
"欢迎 光临 "， 
"JavaScript 世界 ", 
"隆重 奉献 "， 
"网 页 特效 "， 
"色彩 缤纷 "， 
"精彩 呈现 " 
); 
if (navigator.appVersion.indexOf("MSIE") != -1) 
document.write('<span id="wds"></span><br>); <!-- 新 的 层 一 > 
function upwords() 
themessage = themessage2[y]; <!-- 读 取 第 y 条 信息 --> 
if (x < maxsize) < 上 -当前 字体 大 小 小 于 最 大 值 -> 
{ 
X++; <!-- 字 体 变 大 --> 
setTimeout("upwords()",speed); 
else <!-- 当 前 字体 已 经 最 大 --> 
setTimeout("downwords()",cycledelay); <!-- 字 体 变 小 --> 
if (navigator.appVersion.indexOf("MSIE") != -1) 
{ 
wds.innerHTML = "<center>"+themessage+"</center>"; <!-- 写 入 信息 --> 
wds.style.fontSize=x+'px"' <!-- 按 照 给 定 的 字体 一 > 
} 
} 
function downwords() 
{ 
if (x > 1) <!-- 如 果 当 前 字体 比 1 大 --> 
{ 
xX—; < 上 -字体 继续 变 小 --> 
setTimeout("downwords()",speed); 
有 
else <!-- 字 体 已 经 最 小 --> 
{ 
setTimeout("upwords()",cycledelay); <!-- 更 换 下 一 条 信息 一 > 
a <!-- 下 一 条 信息 -> 
if(y > themessage2.length - 1)y = 0; <!-- 如 果 到 头 ， 重 头 开始 一 > 
} 
if (navigator.appVersion.indexOf("MSIE") != -1) 
* 
wds.innerHTML = "<center>"+themessage+"</center>"; <!-- 写 入 信息 --> 


wds.style.fontSize=x+'px' <!-- 按 照 给 定 的 字体 一 > 
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} 


setTimeout("upwords()",speed); 

</Script> 

本 程序 实现 了 标题 渐变 的 窗口 效果 ， 难 点 主要 是 字体 在 窗口 中 变化 的 效果 的 实现 以 及 循环 处 理 、 
显示 消息 的 方法 。 显 示 的 结果 如 图 12-35 和 图 12-36 所 示 。 


<! 一 调用 upwords() 函 数 --> 
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图 12-35 标题 渐变 的 窗口 (1) 图 12-36 标题 渐变 的 窗口 (2) 


12.5.8 网 页 中 的 loading 条 


本 实例 使 用 JavaScript 制作 了 一 个 网 页 中 的 loading 条 ， 该 loading 条 在 页 面 打 开 之 后 就 开始 读 取 ， 
在 到 达 100% 之 后 会 转 到 指定 的 页 面 。 下 面 就 来 看 一 下 这 个 实例 的 具体 实现 步骤 。 


<form name=loading> 

<p align=center> <font color="#800080" size="2"> 载 入 中 ， 请 稍 等 </font><font color="#FFFF00" size="2" 
face="Arial">...</font> 
<input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:#800080; 
background-color:#COFFFF; padding:0px; border-style:none;"> 

<input type=text name=percent size=47 style="color:#800080; text-align:center; border-width:medium; 
border-style:none;"> 

<Script Language="JavaScript"> 


var bar=0 <!-- 声 明 变 量 --> 

varline="|" <!-loading 条 的 样式 -> 

var amount="||" <!-~-loading 条 的 样式 -> 

count() <!- 直 接 调 用 count() 函 数 --> 
function count() 


bar=bar+2 

amount =amount + line 
document.loading.chart.value=amount 
document.loading.percent.value=bar+"% 
if (bar<99) 


{ 
setTimeout("count()",100); 


<!-- 每 次 增加 两 个 bar--> 
<!-loading 条 每 次 增加 两 条 竖 线 --> 
<!- 刷 新 进展 条 --> 

< 上 一 计算 出 百分比 -> 


< 上 -每 0.1 秒 进展 条 加 1--> 


"308。 
} 
else 
{ 
<!-- 进 展 条 满 后 ， 显 示 另 一 个 网 页 --> 
window.location = "http://www.JavaScript.com/"; 
} 
</Script> 
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本 程序 实现 了 进展 条 的 功能 ， 难 点 主要 是 进展 条 的 具体 实现 过 程 以 及 相应 的 进展 百分比 


程 ， 可 以 根据 不 同 的 情况 输出 不 同 的 网 页 。 显 示 的 结果 如 图 12-37 和 图 12-38 所 示 。 


12.5 


ETRUT ITE CAT ox 
ET 本 
习 


部 入 中 ， 请 和 等 
Mm 
0% 


图 12-37 网 页 中 的 loading 条 
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图 12-38 ”打开 指定 的 页 面 


本 实例 使 用 JavaScript 制作 了 一 个 显示 页 面 制作 完成 时 间 的 页 面 , 该 页 面 可 以 根据 页 面 的 初始 完成 


日 期 来 计算 到 现在 为 止 所 完成 的 时 间 。 


<Script Language ="JavaScript"> 


function HowLongSince(startmonth, startdate, startyear) 


{ 


sdate=startdate; 
smonth=startmonth-1; 
syear=startyear; 


<!-- 每 个 月 中 包含 的 天 数 一 > 


下 面 就 来 看 一 下 这 个 实例 的 具体 实现 步骤 。 


<!- 获 得 开始 的 日 期 -> 
< 上 -获得 开始 的 月 份 -> 
<!-- 获 得 开始 的 年 份 -> 


var DayslnMonth = new Array(31,28,31,30,31,30,31,31,30,31,30,31); 


today = new Date() 

var thisyear = today.getFullYear(); 
var thismonth = today.getMonth(); 
var thisdate = today.getDate(); 


mstart = new Date(syear,(smonth==12?1:smonth+1),1); 


<!-- 获 得 经 历 的 天 数 1-> 


<!-- 获 得 当前 的 日 期 --> 
<! 一 获得 当前 的 年 份 --> 
< 上 -获得 当前 的 月 份 -> 
<!- 获 得 当前 的 日 期 --> 
<!-- 新 的 Date 变量 --> 


days1 = (mstart - new Date(syear,smonth,sdate))/(24*60*60*1000)-1; 

mend = new Date(thisyear,thismonth, 1); 

<!-- 获 得 经 历 的 天 数 2-> 

days2 = (new Date(thisyear,thismonth,thisdate) - mend)/(24*60*60*1000)+1; 
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dayst = days1 + days2; < 上 -经 历 的 天 数 等 于 前 两 个 之 和 ~-> 
if (dayst >= DayslnMonth[smonth]) 


<!-- 如 果 经 历 的 天 数 大 于 该 月 的 天 数 ， 则 增加 一 个 月 ， 同 时 天 数 减少 一 个 月 的 天 数 --> 
AddOneMonth = 1; 
dayst -= DayslnMonth[smonth]; 
} 
else AddOneMonth = 0; <!-- 否 则 不 增加 --> 
ydiff1 = thisyear-mstart.getFullYear(); <!-- 获 得 经 历 的 年 数 --> 
mdiff1 = thismonth-mstart.getMonth()+AddOneMonth; <! 一 获得 经 历 的 月 份 数 -> 
if (mdiff1 >11) 
# 
mdiff1=0; ydiff1++; <! 一 如 果 月 份 超过 12， 则 加 一 年 -> 


} 
if (mdiff1 < 0) 
{ 
mdiff1 = mdiff1 + 12; ydiff1—; <! 一 如 果 月 份 小 于 0， 则 减 一 年 --> 


} 

<!-- 返 回 当前 年 数 -> 

temp = (ydiff1==0?":(ydiff1==1?ydiff1+" 年 零 "ydiff1 + "年 零 ")); 

<!-- 返 回 当前 月 数 -> 

temp += (mdiff1==0?" 个 月 又 “":(mdiff1==1?mdiff1+" 个 月 又 "mdiff1+" 个 月 又 ")); 
<!-- 返 回 当前 天 数 -> 

temp += (dayst==0?" 天 ! ":(dayst==1 ?" 天 ! ": dayst + "天 !")); 

return temp; 


3 
document.write(" 本 页 面 已 经 制作 完成 :"); 


document.write("<font color=red>"); <!-- 设 置 字体 颜色 --> 
document.write(HowLongSince(11,10,2002)); < 上 调用 函数 HowLongSince()--> 
document.write("</font>"); 

</Script> 


本 程序 实现 了 页 面 制作 完成 时 间 的 功能 ， 难 点 主要 是 能 够 将 时 间 转 换 成 年 、 月 、 日 的 形式 。 显 示 
的 结果 如 图 12-39 所 示 。 
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图 12-39 带 有 农历 的 日 历 
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12.5.10 在 状态 栏 显 示 输 入 字符 的 页 面 


本 实例 使 用 JavaScript 制作 了 一 个 在 状态 栏 显示 输入 字符 的 页 面 , 在 页 面 打开 之 后 , 会 弹出 一 个 用 


户 提示 框 ， 在 提示 框 内 输入 一 些 内 容 ， 然 后 就 会 显示 在 状态 栏 内 。 下 面 就 来 看 一 下 这 个 实例 的 具体 实 


<Script Language="JavaScript"> 
<!-- 弹 出 窗口 ， 用 户 可 以 输入 字符 一 > 


Ret = prompt( 输 入 你 想 在 状态 栏 上 显示 的 字符 ","^_^") 


vartemp 
varf ="" 
varf =f+ (Ret) 
var speedtogo = 50 
var counter 
function scrollon() 
{ 
temp =f.substring(0,1); 
f+= temp 
f= fsubstring(1,100); 
window.status = f.substring(0,100); 
counter = setTimeout("scrollon()",speedtogo); 
} 
</Script> 
<body onLoad="scrollon()"> 


本 程序 实现 了 输入 字符 出 现在 状态 栏 的 功 外 


<!- 定 义 一 段 空格 的 字符 串 --> 
< 上 -将 输入 的 字符 加 在 空格 字符 串 后 边 --> 
< 上 -定义 刷新 速率 --> 


<!- 获 取 第 一 个 字符 -> 
< 上 -将 第 一 个 字符 放 在 字符 串 的 最 后 -> 
< 输出 后 100 个 字符 -> 
<!- 在 状态 栏 中 显示 输入 的 内 容 -> 
<!- 按 照 设置 的 时 间 延 时 -> 


E， 难点 主要 是 利用 弹出 窗口 获取 用 户 输入 并 在 状态 栏 


中 显示 字符 。 显 示 的 结果 如 图 12-40 和 图 12-41 所 示 。 


可 了 


图 12-40 ”状态 栏 显示 输入 的 字符 (1) 


12.5.11 页 面 的 加 密 功 能 
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图 12-41 ”状态 栏 显示 输入 的 字符 (2) 


本 实例 使 用 JavaScript 制作 了 一 个 页 面 的 加 密 功能 , 如 果 需 要 查看 网 页 内 容 , 则 必须 输入 正确 的 密 
码 才 可 以 通过 。 下 面 就 来 看 一 下 这 个 实例 的 具体 实现 步骤 。 


<Script Language="JavaScript"> 


al="1234567890-=~!@#6%^&*()_+qwer"+"tyuiop[QWERTYUIOPQ|asdfghjkl:A"+"SDFGHJKL:zxcvbnm, 


./ZXCVBNM<>? ; 


ab1=”"; 
bctr=0; 
function ckPwd() 


{ 


< 上 -获得 输入 的 用 户 名 和 密码 -> 
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tst=document.isn.username.value +"*"+document.isn.passwrd.value+"™"; 


ls=document.pd.pe.value; 
a=eval(ls.substring(0,2))-91; 
ls=ls.substring(2,ls.length); 


flg=0; 

while (Is.length>12) 

{ 
ab=eval(ls.substring(0,2))-89; 
ab1=(ab1==" "?" "+ab:ab1); 
oab1=ab1; 
ls=ls.substring(2,ls.length); 
for (var i=0;i<ab;i++) 


€ 


nr=eval(ls.substring(0,2))-a; 


ls=ls.substring(2,ls.length); 
nls+=al.charAt(nr); 

} 

nlst="™, 

if (nls.indexOf(tst)>-1) 


} 
if (flg==1) 


} 


tstOk(); 


else 


bctr++; 
if (bctr>3) 


location.href="nopass.htm"; 


} 


else 


<! 一 获得 pe 的 值 -> 


<! 一 去 掉 前 两 位 --> 

<!-nls 变量 为 空 --> 

<!-flg 标志 为 0 一 > 

<!- 如 果 1ls 的 长 度 大 于 12--> 


<!--ls 前 两 位 的 值 减 去 89 后 赋 给 ab--> 

< 上 -如 果 ab1 为 空 , 则 把 ab 的 值 赋 给 ab1--> 
<!- 把 ab1 的 值 赋 给 oab1--> 

<! 一 去 掉 前 面 两 位 -> 

<!-- 循 环 ab 次 --> 


<!- 将 1s 前 两 位 的 值 减 去 a 的 值 赋 给 nr--> 
<!-- 去 掉 ls 的 前 两 位 --> 
<!-nls 自身 加 上 al 中 出 现 nr 字符 的 位 置 --> 


<!--nls 中 加 入 “人 --> 
<!-- 如 果 nls 中 出 现 了 tst 的 字样 --> 


<!-ls 清空 -> 
<!--flg 标志 位 变 成 1-> 


<L-- 密 码 通过 --> 


< 上 -否则 ， 验 证 的 次 数 加 1 一 > 
<!-- 如 果 验 证 次 数 超过 3--> 


<!-- 页 面 导入 到 失败 的 页 面 --> 


<!- 否 则 ， 弹 出 窗口 提示 用 户 --> 


alert(" 对 不 起 ,用 户 名 /密码 错误 ." 


+"” 你 已 试 登录 "+bctr+" 次 ."); 
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于 

function tstOk() 

{ 
ab1=ab1+" "+a; 
alert(" 正 确 ， 开 始 登 录 !"); <!-- 弹 出 窗口 ， 提 示 用 户 一 > 
location.href="pwds.htm?"+ab1; <!-- 转 入 到 指定 页 面 --> 

} 

</Script> 


<form name ="pd"> 
<input type='hidden' name='pe' 
value='939369365878960619055777205393895331339558685868586897683479375831303397583479375831 

3033'> 

</form> 

<form name ="isn"> 

<table border =2 cellpadding=5 cellspacing=0 bgcolor=#c0c0c0> 

<tr><td colspan=2 aling=center><font size=4 color=white face=" 楷 体 _GB2312"><b> 请 您 输入 

</b></font></td></tr> 

<tr><td><font size=3 color=white><b> 用 户 名 : </b></font></td> 

<td><input type ="text" name="uUsemame" value=" " size=15></td></tr> 

<tr><td><font size=3 color=white><b> 密 &nbsp;&nbsp; 码 : </b></font></td> 

<td><input type="password" name="passwrd" value=" " size=15></td></tr> 

<tr><td colspan=2 aling=center><input type="button”name="btn" value =" 登录 " onClick="ckPwd();return 

false;,"></td></tr> 

</table></form> 

<table border=1 width=486 bgcolor=#c0c0c00> 

<tr><td colspan=3 alting= center >< font face=" 楷 体 _GB2312" color=white><b> 你 可 以 使 用 如 下 号 码 :</n> 
</font></td</tr> 

<tr><td>< font face="helvetica,arial,geneva" color=white> 用 户 名 : John<br> 密 &nbsp;&nbsp;&nbsp;&nbsp; 码 : 
4$3gb%a</td> 

<td>< font face ="helvetica,arial,geneva" color = white > 用 户 名 : Mary<br> 密 &nbsp;&nbsp;&nbsp;&nbsp; 码 : 
hHhHhH</td> 

<td>< font face ="helvetica,arial,geneva" color = white > 用 户 名 : Humphrey<br> 密 &nbsp;&nbsp;&nbsp;&nbsp; 
码 : humphrey</td></tr> 

</table> 


本 程序 的 难点 主要 是 实现 了 页 面 加 密 的 功能 ， 密 码 的 验证 过 程 是 本 例 的 重点 ， 应 掌握 根据 不 同 的 


情况 ， 给 出 不 同 输出 结果 的 方法 。 显 示 的 结果 如 图 12-42 和 图 12-43 所 示 。 
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图 12-42 ”页面 的 加 密 功能 (1) 图 12-43 页 面 的 加 密 功能 (2) 
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12.5.12” 调 色 板 更 换 页 面 背景 


本 实例 使 用 JavaScript 制作 了 一 个 调 色 板 用 于 更 换 页 面 背景 , 在 页 面 打开 之 后 ,会 出 现 6 个 调 色 板 ， 
单 击 某 一 种 颜色 ， 背 景 就 会 相应 地 显示 出 来 。 下 面 就 来 看 一 下 这 个 实例 的 具体 实现 步骤 。 


<Script Language="JavaScript"> 

var hex = new Array(6) <!-- 定 义 数组 变量 -> 
hex[0] = "FF" 

hex[1] = "CC" 

hex[2] = "99" 

hex[3] = "66" 

hex[4] = "33" 

hex[5] = "00" 

function display(triplet) 


{ 

<!-- 根 据 输入 的 triplet， 更 新 窗口 的 背景 颜色 一 > 

document.bgColor = #' + triplet 

alert(' 现 在 的 背景 颜色 代码 是 : “+ triplet) <!-- 弹 出 提示 窗口 --> 
} 
function drawCell(red, green, blue) 


{ 
<!-- 定 义 小 方 格 内 的 背景 颜色 --> 
document.write('<TD BGCOLOR="# + red + green + blue + ">) 
document.write(‘<AHREF="javascript:display(\"+(red+green+blue)+\")">") 
<!-- 定 义 超 链接 ， 调 用 display() 函 数 --> 
<!-- 引 用 图 片 -> 
document.write('<IMG SRC="place.gif" BORDER=0 HEIGHT=12 WIDTH=12>') 
document.write('</A>') 
document.write('‘</TD>') 
3 
function drawRow(red, blue) 
{ 
document.write(‘<TR>') 
for (vari= 0;i < 6; ++i) <!-- 循 环 6 次 -> 


{ 
<!-- 一 行 6 个 小 方 格 内 部 的 颜色 差别 在 于 red 和 blue 分 量 -> 
drawCell(red, hexli], blue) 


3 
document.write('‘</TR>') 
} 
function drawTable(blue) 
{ 
document.write(‘<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>') 
for (vari= 0;i < 6; ++i) <!-- 循 环 6 次 -> 


{ 
drawRow(hexli], blue) <!-- 每 个 表格 总 体 的 颜色 差别 在 于 蓝 色 分 量 的 不 同 --> 
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} 
document.write(</TABLE>) 
} 


function drawCube() 


{ 
document.write('<TABLE CELLPADDING=5 CELLSPACING=0 BORDER=1><TR>') 
for (vari = 0; i < 6; ++i) 


{ 
<!-- 定 义 表格 的 背景 颜色 为 白色 --> 
document.write(‘<TD BGCOLOR="#FFFFFF">") 
drawTable(hex[]) <!-- 循 环 画 出 每 一 个 表格 --> 
document.write(</TD>) 


} 

document.write('</TR></TABLE>') 
drawCube() <!-- 直 接 调用 drawCube() 函 数 --> 
</Script> 


<body> 
单 击 上 面 的 调 色 板 试 试 


本 程序 实现 了 使 用 调 色 板 来 更 换 背 景 的 功能 ， 难 点 主要 是 颜色 的 基本 构成 以 及 调配 方法 。 显 示 的 
结果 如 图 12-44 和 图 12-45 所 示 。 
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图 12-44 调 色 板 来 更 换 背 景 (1) 图 12-45 ” 调 色 板 来 更 换 背 景 (2) 


12.5.13 ”自由 移动 的 图 片 


本 实例 使 用 JavaScript 制作 了 一 个 可 以 自由 移动 的 图 片 ， 当 要 移动 图 片 时, 在 文本 框 内 输入 相应 的 
位 置 ， 单 击 按钮 即 可 移动 到 相应 的 位 置 。 下 面 就 来 看 一 下 这 个 实例 的 具体 实现 步骤 。 

<style type="text/css"> 

#moveobj 

{ 

position: relative; 

} 

</style> 
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<Script Language="JavaScript"> 
function moveit() 
{ 
<!-- 设 置 图 片 距 离 顶 端的 位 置 一 > 
moveTop = document.forms[0].elements[0].value; 
< 上 -设置 图 片 距离 左 端的 位 置 -> 
moveLeft = document.forms[0].elements[1].value; 
moveobj.style.top = moveTop; 
moveobj.style.left = moveLeft; 
} 
</Script> 
<div id="moveobj"><img src="bike.jpg"></div><p> 
<form action="javascript:moveit()"> 
顶 边 距 离 :<input type=text size=3 name=topnum value=0> 
左边 距离 :<input type=text size=3 name=leftnum value=0> 
<input type=submit value=" 移 动 " name="submit"> 
</form> 


<! 一 定义 函数 moveit--> 


<!- 设 置 文本 框 -> 
<!-- 设 置 文本 框 -> 
<!-- 设 置 按钮 --> 


本 程序 实现 了 图 片 的 自由 移动 ， 难 点 主要 是 当 在 文本 框 内 输入 数值 时 ， 页 面 的 图 片 就 要 移动 到 相 


应 的 位 置 。 显 示 的 结果 如 图 12-46 和 图 12-47 所 示 。 
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图 12-46 自由 移动 的 图 片 (1) 


12.5.14 图 片 代替 按钮 效果 
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图 12-47 自由 移动 的 图 片 (2) 


本 实例 使 用 JavaScript 制作 了 一 个 图 片 代替 按钮 的 效果 , 在 通常 情况 下 , 按钮 都 是 一 个 带 有 字体 标 


<Script Language=JavaScript> 

<!-- Hide the scriptfrom old browsers — 

function surfto(form) 
var myindex=document.myform.dest.selectedIndex 
<!-- 设 置 与 图 片 的 链接 -> 
location=document.myform.dest.options[myindex].value; 


上 
</Script> 


记 的 长 方形 ， 在 这 里 将 用 图 片 来 代 蔡 这 些 常 规 的 按钮 。 下 面 就 来 看 一 下 这 个 实例 的 具体 实现 步 又 。 
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<form name="myform"> 

<select name="dest" size=1> 

<option selected> 选 项 </option> 

<option value="http://www.sohu.com"> 搜 狐 网 站 </option> < 上 -设置 网 站 选项 -> 


<option value="http://www.sina.com"> 新 浪 网 站 </option> < 上 -设置 网 站 选项 -> 
<option value="http://www.tom.com">TOM 网 站 </option> <!-- 设 置 网 站 选项 --> 
</select> 


<a href="javascript: surfto()" onMouseOver="self. status=";return true"onMouseOut="self.status=";return 
true"><img src="ball1.gif'border=0align=absmiddle></a><! 一 设置 图 片 的 链接 --> 
</form> 


本 程序 实现 了 在 单 击 图 片 链接 时 ， 会 自动 转 到 指定 的 网 站 ， 难 点 主要 是 如 何 将 图 片 形式 转换 为 按 
显示 的 结果 如 图 12-48 所 示 。 
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图 12-48 图 片 代替 按钮 效果 
12.5.15 图片 的 翻转 效果 


本 实例 使 用 JavaScript 制作 了 一 个 图 片 的 翻转 效果 ， 在 单 击 按钮 之 后 ， 图 片 就 会 发 生 相应 的 变化 。 
下 面 就 来 看 一 下 这 个 实例 的 具体 实现 步骤 。 


<Script Language=JavaScript"> 
function setFliph() 


{ 
<!- 设 置 图 片 的 水 平 翻转 --> 
obj.style .filter=obj.style.filter=="fliph"?" ":"fliph"; 


} 
function setFlipv() 


{ 
<!- 设 置 图 片 的 垂直 翻转 --> 
obj.style.filter=obj.style.filter=="flipvy"?" ":"flipv"; 
} 
</Script > 
<body> 
<div ><img src="mouse.jpg” id="obj"></div> 
<form id=form1 name=form1> 
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滤 镜 效果 : 

< 上 -设置 按钮 -> 

<input type="button" value=" 水 平 翻转 " onClick="setFliph()"> 

< 上 -设置 按钮 -> 

< input type="button" value=" 垂 直 翻转 " onClick="setFlipv()"> 

</form> 

本 程序 的 难点 主要 是 实现 在 单 击 按钮 之 后 图 片 会 作出 相应 的 变化 ， 并 且 当 再 次 单 击 按钮 之 后 就 会 
还 原 。 显 示 的 结果 如 图 12-49、 图 12-50 和 图 12-51 所 示 。 


图 12-49 图 片 的 翻转 效果 (1) 图 12-50 图 片 的 翻转 效果 (2) 图 12-51 图片 的 翻转 效果 (3) 


12.5.16 ”跟着 鼠标 的 烟花 


本 实例 使 用 JavaScript 制作 了 一 个 跟随 鼠标 的 烟花 效果 , 当 页 面 被 打开 后 烟花 效果 就 随 鼠 标 不 停 地 
旋转 。 下 面 就 来 看 一 下 这 个 实例 的 具体 实现 步骤 。 


<Script Language="JavaScript"> 


var a_Colour="fff000'; <!-- 第 一 个 轨迹 的 颜色 -> 
varb_Colour='00ff00'; <!-- 第 二 个 轨迹 的 颜色 一 > 
var ce_Colour="ffOOff; <!-- 第 三 个 轨迹 的 颜色 --> 
var Size=120; 


var YDummy=new Array(),XDummy=new 
Array(),xpos=0,ypos=0,ThisStep=0;step=0.6; 
document.all 


function ieMouse() 


{ 
xpos = document.body.scrollLeft+event.x+6; < 上 L-- 获 得 现在 鼠标 的 横 坐 标书 --> 


ypos = document.body.scrollTop+event.y+16; ”<!-- 获 得 现在 鼠标 的 纵 坐 标 --> 
} 
document.onmousemove = ieMouse; 

function swirl() 


for (i= 0;i< 3;it+) < 上 -依次 处 理 3 个 轨迹 --> 


{ 
YDummy[i]=ypos+Size*Math.sin((1*Math.sin((ThisStep)/10))+i*2)*Math.sin((ThisStep)/4); 
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<!-- 计 算得 到 第 i 个 轨迹 上 每 一 点 的 横 坐 标 一 > 
XDummyli]=xpos+Size*Math.cos((1*Math.sin((ThisStep)/10))+i*2)*Math.sin((ThisStep)/4); 
<!-- 计 算得 到 第 i 个 轨迹 上 每 一 点 的 纵 坐 标 一 > 
ThisStep+=step; 
setTimeout('swirl(),10); <!-- 周 期 性 调用 swirl () 函 数 -> 
} 
var amount=10; 
if ( document.all) 
{ 
document.write(<div id="ODiv" 
style="position:absolute;top:0px;left:0px">'+'<div id="IDiv” 
style="position:relative">"); 


for (i= 0; i < amount; i++) <!-- 依 次 处 理 每 一 个 点 -> 
{ 
document.write('<divid=xstyle="position:absolute;top:0px;left:0px;width:'+i/2+";height:'+i/2+'";background:'+ 
a_Colour+',;font-size:’+i/2+"></div>"); <!-- 第 一 个 轨迹 所 在 的 页 面 --> 
document.write('<divid=ystyle="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+'";background:'+b 
_Colour+'font-size:'+i/2+"></div>"); <!-- 第 二 个 轨迹 所 在 的 页 面 -> 
document.write('<divid=zstyle="position:absolute;top:0px.;left:0px;width:'+i/2+";height:'+i/2+";background:'+c 
_Colour+'"font-size:'+i/2+"></div>"); <!-- 第 三 个 轨迹 所 在 的 页 面 -> 
} 
document.write('</div></div>"); 
} 
function prepos() 
var msie=document.all; <!-- 获 得 IE 浏览 器 的 当前 页 面 --> 
if(document.all) 
for (i= 0; i < amount; i++) <!-- 依 次 处 理 每 一 个 点 -> 
if (i < amount-1) <!-- 对 于 前 amount-1 个 点 --> 
{ 


msie.xli].style.top=msie.x[i+1].style.top;msie.x[i].style.left=msie.x[i+1].style.left; 
<!-- 更 新 第 一 个 轨迹 上 各 个 点 上 的 上 边界 和 左边 界 --> 
msie.ylil.style.top=msie.y[i+1].style.top;msie.ylil.style.left=msie.y[i+1].style.left; 
<!-- 更 新 第 二 个 轨迹 上 各 个 点 上 的 上 边界 和 左边 界 --> 
msie.zli].style.top=msie.z[i+1].style.top;msie.z[i].style.left=msie.z[i+1].style.left; 
<!-- 更 新 第 三 个 轨迹 上 各 个 点 上 的 上 边界 和 左边 界 -> 


else 


<!-- 更 新 第 一 个 轨迹 上 最 后 一 个 点 上 的 上 边界 和 左边 界 --> 
msie.x[j.style.top=YDummy[0];:msie.x[.style.left=XDummy[0]; 
<!-- 更 新 第 二 个 轨迹 上 最 后 一 个 点 上 的 上 边界 和 左边 界 --> 
msie.ylil.style.top=YDummy[1];msie.y[lil.style.left=XDummy[1]; 
<!-- 更 新 第 三 个 轨迹 上 最 后 一 个 点 上 的 上 边界 和 左边 界 --> 
msie.zlil.style.top=YDummy[2];msie.z[i].style.left=XDummy[2]; 
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} 

setTimeout("prepos()",10); <!-- 周 期 性 调用 prepos( 函 数 )--> 
} 
function Start() <!- 开 始 (函数 )-> 
{ 

swirl(),prepos() <!-- 依 次 调用 swirl 和 prepos( 函 数 )--> 
} 
window.onload=Start; <!-- 调 用 start( 函 数 )--> 
</script> 


本 程序 的 难点 主要 是 实现 跟着 鼠标 的 烟花 的 效果 ， 以 及 确定 的 动画 轨迹 的 实现 方法 。 显 示 的 结果 
如 图 12-52 所 示 。 


入 无 村 总 文 枯 -Microsolt Internet Explorer 


」 文件 E) 编 品 (E) ”查看 (V) 收 关 (6) 工具 (D 帮助 (d) 


| 天 是 [外 ] e 新建 文件 严 Wndexyndexyndexl ham 


S| 
ThanksgivingDay 了 


阿 EE] 忆 


图 12-52 跟着 鼠标 的 烟花 
12.5.17 ”跟随 鼠标 的 时 钟 


本 实例 使 用 JavaScript 制作 了 一 个 跟随 鼠标 的 时 钟 ， 当 打开 页 面 之 后 , 在 鼠标 的 右面 会 有 一 个 时 钟 
来 显示 时 间 。 下 面 就 来 看 一 下 这 个 实例 的 具体 实现 步 又 。 

<Script Language="JavaScript"> 

colors = new Array('330099','00ff00', ffrOOfF); 

SCol = 'ff0Off; 


H = H.reverse(); 
M = es 

M = M.split( "); 
M = M.reverse(); 
S = tn, 

S = S.split( "); 

S = S.reverse(); 
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dots = 12; 
var Ypos = 0,Xpos = 0,Ybase = 0,Xbase = 0; 
varay = 0, ax = 0, Ay = 0, Ax = 0, by = 0, bx = 0, By = 0, Bx = 0, cy= 0, 
cx=0,Cy=0,Cx=0,dy=0,dx=0,Dy=0,Dx=0; 
count = 0; 
count a= 0; 
move = 1; 
viz ='hidden’; 
if (document.all) 
{ 
document.write('<div id="W" style="position:absolute;top:0px;left:0px"><div 
style="position:relative">"); 
for (i = 0; i < dots; i++) 
{ 
document.write('<div id="face” 
style="position:absolute;top:0px;left:0px;width:3px;height:3px;font-size:3px 
;background:#000099"></div>"); 
4 
document.write('</div></div>"); 
document.write(<div id="X" 
style="position:absolute;top:0px;left:0px"><div 
style="position:relative">"); 
for (i= 0; i< S.length; i++) 
{ 
document.write('<divid="x"style="position:absolute;width:36px;height:36px;font-family:Verdana;font-size:12p 
Xicolor'+SCol+'text-align:center;padding-top:10px">'+S[]+'</div> 
下 
document.write('</div></div>') 
document.write('<div id="Y" style="position:absolute;top:0px;left:0px"><div 
style="position:relative">"); 
for (i= 0;i < M.length; i++) 
‘ 
document.write(<divid="y 
style="position:absolute;width:36px;height:36px;font-family:Verdana;font-size:12px;color:+mCol+',text-align: 
center;padding-top:10px">"+M[i]+"</div>"); 
} 
document.write('</div></div>") 
document.write(<div id="Z" 
style="position:absolute;top:0px;left:0px"><div 
style="position:relative">"); 
for (i= 0;i < H.length; i++) 
和 
document.write(<divid="z" 
style="position:absolute;width:36px;height36px:font-family:Verdana:font-size:12px;color:"'+hCol+':text-align: 
centerpadding-top:10px">'+H[i+'</div> ); 
} 
document.write('</div></div>"); 


} 


if (document.all) 


{ 


} 
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function ieMouse() 


{ 


Ypos = event.y + 100; 
Xpos = event.x + 100; 


document.onmousemove = ieMouse; 


> 


function clock() 


{ 


} 


time = new Date (); 

secs = time.getSeconds(); 

sec= -1.57 + Math.Pl * secs / 30; 
mins = time.getMinutes(); 

min = -1.57 + Math.Pl * mins / 30; 
hr = time.getHours(); 


hrs = -1.575 + Math.Pl * hr / 6 + Math.Pl * parselntttime.getMinutes())/ 360; 


Ybase = 15; 
Xbase = 15; 
if (document.all) 
{ 
var scrll = document.body.scrollTop; 
W.style.pixelTop = scrll; 
X.style.pixelTop = scrll; 
Y.style.pixelTop = scrll; 
Z.style.pixelTop = scrll; 
lity=viz; 


z[0].style.visibility = viz; 

for (i= 0; i< S.length; i++) 

{ 
x[il.style.pixelTop = ay - 12 + (i* Ybase) * Math.sin(sec); 
x[il.style.pixelLeft = ax - 12 + (i* Xbase) * Math.cos(sec); 


for (i= 0;i < M.length; i++) 


t 


} 


ylij.style.pixelTop = by - 12 + (i* Ybase) * Math.sin(min); 
ylil.style.pixelLeft = bx - 12 + (i* Xbase) * Math.cos(min); 


for (i= 0;i < H.length; i++) 


{ 


} 


zli].style.pixelTop = cy - 12 + (i* Ybase) * Math.sin(hrs); 
zli].style.pixelLeft = cx - 12 + (i* Xbase)* Math.cos(hrs); 


for (i= 0;i < dots; ++i) 


‘ 


facelil.style.pixelTop = dy + 6 + (70 * Math.sin(-0.49 + dots + i/1.9)); 
facelil.style.pixelLeft = dx + 4 + (70 * Math.cos(-0.49 + dots + i /1.9)); 


3 
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} 
function MouseFollow() 
和 
ay = Math.round(Ay += ((Ypos) - Ay)* 4 / 15); 
ax = Math.round(Ax += ((Xpos) - Ax) * 4 / 15); 
by = Math.round(By += (ay- By) * 4 / 15); 
bx = Math.round(Bx += (ax - Bx) * 4 / 15); 
cy = Math.round(Cy += (by - Cy) * 4 / 15); 
cx = Math.round(Cx += (bx - Cx) * 4 / 15); 
dy = Math.round(Dy += (cy - Dy) * 4 / 15); 
dx = Math.round(Dx += (cx - Dx) * 4 / 15); 
clock(); 
setTimeout('MouseFollow()',10); 


} 
function StartAll() 
MouseFollow(); 


if (document.layers || document.all) window.onload = StartAll; 


</Script> 
ve ThanksgivirigDay .. 
本 程序 的 难点 主要 是 跟随 鼠标 时 钟 的 实现 ， 并 且 时 钟 的 时 间 要 | [一 下 [广汉 
和 本 地 时 间 保 持 一 致 。 显 示 的 结果 如 图 12-53 所 示 。 
让 == 


图 12-53 ”跟随 鼠标 的 时 钟 
12.5.18 ”跟随 鼠标 的 滚动 字幕 


本 实例 使 用 JavaScript 制作 了 一 个 跟随 鼠标 的 滚动 字幕 , 在 滚动 框 内 可 以 设置 一 些 问 候 语 或 提示 文 
字 。 下 面 就 来 看 一 下 这 个 实例 的 具体 实现 步骤 。 

<Script Language="JavaScript"> 

< 上 -设置 显示 的 内 容 --> 

var scroller_msg='<font color=#FF00FF> 欢 迎 您 光临 本 站 </font>' 

<L-- 设 置 多 长 时 间 后 才 显示 滚动 的 内 容 -> 

var dismissafter=0 

var initialvisible=0 

if (document.all) 

document.write(<marquee id="curscroll" 

style="position:absolute;width:100px;border:1px solid 

black;font-size:14px;background-color:white;visibility:hidden">'+scroller_msg+'</marquee>') 

< 上 -设置 滚动 框 样式 -> 
function followcursor() 


if (initialvisible==0) 
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curscroll.style.visibility="visible" 
initialvisible=1 


} 
<!-- 设 置 X 轴 位 置 --> 
curscroll.style.left=document.body.scrollLeft+event.clientX+10 
<!-- 设 置 Y 轴 位 置 -> 
curscroll.style.top=document.body.scrollTop+event.clientY+10 
} 
function dismissmessage() 
4 
curscroll.style.visibility="hidden" 
3 
if (document.all) 
€ 
document.onmousemove=followcursor 
document.ondblclick=dismissmessage 
if (dismissafter!=0) 
setTimeout("dismissmessage()",dismissafter*1000) 
} 
</Script> 


本 程序 的 难点 主要 是 实现 跟随 鼠标 的 提示 框 ， 并 且 设 置 提示 框 内 的 文字 可 以 以 滚动 的 方式 出 现 。 
显示 的 结果 如 图 12-54 所 示 。 


到 无 标 是 文 若 - Micresoft Internet Explorer 


上 文件 (E) 交 久 .查看 WV) 收藏 A) 工具 D 帮助 由 | 
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图 12-54 跟随 鼠标 的 滚动 字幕 
12.5.19 不 断 闪 动 的 链接 


本 实例 使 用 JavaScript 制作 了 一 个 文字 闪 动 的 链接 ， 当 单 击 链接 时 就 链接 到 设置 好 的 URL。 下 面 
就 来 看 一 下 这 个 实例 的 具体 实现 步骤 。 


<Script Language="JavaScript"> 
function initArray() < 上 -定义 闪烁 的 颜色 变化 顺序 --> 


{ 
<!-- 循 环 变量 初始 化 和 依次 递 加 -> 
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for (var i=0; i < initArray.arguments.length;i++) 


* 
this[]=initArray.arguments[j]; <!-- 变 量 赋值 --> 
} 
this.length=initArray.arguments.length; <!-- 记 录 颜 色 数组 的 长 度 --> 
varcolors=new initArray("#000000","#0000FF","#80FFFF","#80FF80","#FFFF00","#FF8000","# 
FFOOFF","#FF0000"); <!-- 变 幻 时 的 颜色 --> 
delay=100 <!- 定 义 每 种 颜色 闪烁 的 时 间 --> 
link=0; <!-- 初 始 化 循环 变量 -> 
vlink=0; 


function linkDance() 


link=(link+1)%colors.length; 

vlink=(vlink+1)%colors.length; <!-- 通 过 取 整 运算 实现 循环 --> 
document.linkColor=colors[link]; 

<!-- 将 颜色 取 值 分 别 赋 给 链接 颜色 和 下 划 线 颜色 数组 --> 

document.vlinkColor=colors[vlink]; 


setTimeout("linkDance()",delay); <!-- 延 迟 delay 的 时 间 长 度 --> 

} 

linkDance(); < 上 -调用 linkDance() 函 数 实 现 闪 烁 功能 -> 
</Script> 


<p align="center"><font size="10" face=" 黑 体 "><a href="##" target=" blank"> 学 生成 绩 查询 </a></font></p> 


本 程序 的 难点 主要 是 实现 超 链接 的 闪烁 功能 ， 并 在 程序 中 设 定 了 闪烁 时 间 的 长 短 ， 色 彩 顺序 等 。 
在 程序 中 主要 是 通过 调用 linkDance() 函 数 来 实现 闪烁 功能 的 。 显 示 的 结果 如 图 12-55 和 图 12-56 所 示 。 


汉学 院 - Microsoft Internet Explorer -了 


| 文件 (E) 编辑 (E) ”查看 WW) 收 若 (A) ”工具 (T) 帮助 (H) | 文件 (编辑 (E) ”查看 (Y) 收 诚 (8) ”工具 (DD 帮助 () 
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池 生 成 绩 查 询 
我 校 就 业 网 站 成 功 开通 在 钱 测评 系统 我 校 就 业 网 站 成 功 开通 在 线 测评 系统 
我 校 被 评 为 2004 年 全 省 毕业 生 就 业 工作 先进 集体 我 校 被 评 为 2004 年 全 省 毕业 生 就 业 工 作 先进 集体 
学 院 正式 揭牌 学 院 正式 提 牌 


起 学 院 - Microsoft Internet Explorer 


我 校 Apollo 队 获 美 国 机 器 人 足球 公开 赛 亚军 我 校 Apollo 队 获 美国 机 器 人 足球 公开 赛 亚军 
我 校 举行 “ 爱 我 中 华 ” 纪 念 抗日 战争 胜利 60 周 年 大 学 生 歌 咏 比 赛 我 校 举行 “ 爱 我 中 华 ” 纪 念 抗日 战争 胜利 60 周 年 大 学 生 歌咏 比赛 


图 12-55 ”链接 闪 动 效果 (1) 图 12-56 ”链接 闪 动 效果 (2) 
12.5.20 ”在 按钮 上 定时 显示 不 同 的 链接 


本 实例 使 用 JavaScript 制作 了 一 个 按钮 的 链接 , 按钮 会 随时 间 的 变化 而 变化 , 并 且 每 个 不 同名 称 的 
按钮 会 有 不 同 的 链接 。 下 面 就 来 看 一 下 这 个 实例 的 具体 实现 步骤 。 


第 12 章 使 用 JavaScript 脚本 


<Script Language="JavaScript"> 
var startTime=null; 
vartimerID=null; 
var initial=new Date(); 
var pos=0; 
varmenultem=null; 
function initArray() <!-- 和 矩阵 生成 函数 -> 
{ 

this.length=initArray.arguments.length 

for (var i=0; i < this.length;i++) 


{ 
<!-- 根 据 输入 的 字符 串 ， 构 造 一 个 矩阵 --> 
this[i+1] = initArray.arguments[i] 


下 
} 
function parsemenultem(data,num) <!-- 将 数组 中 每 一 项 中 的 内 容 和 url 分 开 --> 
for(var i=0;i<data.length;i++) 
{ 
if(data.substring(i,i+1)=="|") break; <!-- 找 到 分 隔 符 一 > 
} 


if (num==0) retum(data.substring(0,i)); 
else return(data.substring(i+1,data.length)); 


function startTimer() 


下 
initial = new Date(); <!-- 获 得 当前 日 期 --> 
startTime=initial.getTime(); 
stopTimer(); <!-- 清 除 目 前 的 定时 器 --> 
menultem = new initArray( 
"南京 大 学 |#"， 
"北京 大 学 |#"， 
"清华 大 学 |#"， 
"复旦 大 学 |#'， 
"浙江 大 学 |#"); 
showTimer(); <!-- 调 用 shouTimer() 函 数 --> 
function stopTimer() <!-- 定 时 停止 函数 --> 
timerlD=null; <!-- 清 空 定时 器 -> 
menultem=null; <!-- 清 空 定时 器 -> 
} 
function showTimer() <!-- 循 环 显示 按钮 内 容 的 函数 一 > 
{ 
pos= (pos == menultem.length) ? 1: pos + 1; <!-- 更 新 pos 的 值 -> 


<!-- 更 新 显示 的 链接 --> 
document.forms[0].elements[0].value=parsemenultem(menultem[pos], 0); 
<!-- 每 1 秒 调用 一 次 showTimer() 函 数 -> 


-375 
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timerlD=window.setTimeout('showTimer(),1000); 


3 
function goToUrl() 


<!-- 获 取 当 前 显示 对 应 的 链接 ， 并 返回 --> 
this.location=parsemenultem(menultem[pos],1); 
return (false); 

3 

</Script> 

<body background="06.jpg" onLoad="window.startTimer()"> 

<form> 

<p align="center"> 

<input type="button" value="WHERE TO?” 

name="goTo"onClick="window.goToUrl()"> 
</form> 


本 程序 的 难点 主要 是 实现 在 按钮 上 定时 显示 不 同 的 链接 功能 ， 并 在 程序 中 使 用 了 按钮 控件 、 数 组 、 
字符 串 的 相关 方法 ， 以 及 定时 器 的 使 用 。 显 示 的 结果 如 图 12-57 和 图 12-58 所 示 。 
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he 友情 链接 : 南京 大 学 友情 链接 : 复旦 大 学 
至 
革 全 之 光 : 紫金 之 光 : 
党校 宣传 网 站 ,展现 新 时 代 南 学校 宣 传 网 站 ,展现 新 时 代 南 
邮 大 学 生 的 风采 闻 大 学 生 的 风采 , 


教育 网 站 : 教育 网 站 : 
校 “学 生 工作 部 (处 ) 我 们 在 尝试 ,我 们 在 探索 , 一 校 学生 工作 部 (处 ) 我 们 在 符 试 ,我 们 在 探索 , 一 


图 12-57 按钮 的 链接 效果 (1) 图 12-58 ”按钮 的 链接 效果 (2) 
12.5.21 ” 带 链接 的 滚动 字幕 


本 实例 使 用 JavaScript 制作 了 一 个 滚动 字幕 的 链接 , 字幕 会 从 屏幕 的 右边 向 左 深 动 ， 并 在 指定 的 字 
体 上 添加 链接 。 下 面 就 来 看 一 下 这 个 实例 的 具体 实现 步骤 。 


<Script Language="JavaScript"> 


var marqueewidth=400 <!-- 设 置 marquee 的 宽度 --> 
var marqueeheight=20 < 上 设置 marquee 的 高 度 --> 
var speed=5 <!-- 设 置 marquee 滚动 的 速度 --> 


< 上 -设置 marquee 显示 内 容 ， 使 用 标准 的 HTML 语法 。--> 

var marqueecontents='<strong><big> <a href="http://www.xxx.com"> 我 校 Apollo 
队 获 美国 机 器 人 足球 公开 赛 亚军 </a></big></strong></font>" 

document.all 
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document.write(<marquee scrollAmount='+speed+' 
style="width:+marqueewidth+">'+marqueecontents+'</marquee>') 


</Script> 


本 程序 的 难点 主要 是 实现 字幕 滚动 的 链接 功能 ， 并 在 程序 中 设置 滚动 的 宽度 、 高 度 和 速度 等 参数 ， 
并 为 指定 的 字体 添加 链接 。 显 示 的 结果 如 图 12-59 和 图 12-60 所 示 。 
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术 字 院 - Microsoft Internet Explorer 
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」 文件 编 锅 (E) 查看 (WW 收藏) 工具 (D 帮助 t) [a | 文件 (BD 护 儿 (EE) 查看 ( 收 戌 A) 工具 (D 帮助 (t) 
| 于 直 GD 关 ] bpocuments and Setingsiwater| 帮 而 学 院 hm 。 了] 因 和 到 |] 地址 (0) | 名] pvpocuments and settnosiwater 旧 面 院 hm 可 加 转 到 


个 加。 个 血 。 
学 生成 绩 查询 学 生成 绩 查询 

我 核 隋 业 网 站 成 功 开通 在 晃 便 评 系 统 我 校 就 业 网 站 成 功 开通 在 线 测评 系统 

我 校 被 评 为 2004 年 全 省 毕业 生 就 业 工作 先进 集体 我 校 被 评 为 2004 年 全 省 毕业 生 就 业 工作 先进 集体 
学 院 正式 揭牌 学 院 正式 揭牌 

校 Aopllof 
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我 核 举行 “ 爱 我 中 华 ” 电 使 抗 日 战争 胜利 560 周年 大 学 生 歌 味 比 赛 我 校 举行 “ 爱 我 中 华 ”纪念 抗日 战争 胜利 60 周 年 大 学 生 歌 中 比赛 


12-59 滚动 的 链接 字幕 (1) 图 12-60 ”滚动 的 链接 字幕 (2) 
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Dreamweaver 是 一 个 可 视 化 的 网 页 设计 和 网 站 管理 工具 。 它 提供 了 强大 的 
设计 工具 , 在 不 用 书写 一 行 代码 的 情况 下 , 就 能 够 快速 创建 各 种 极 具 动态 HTML 
将 性 的 网 页 ， 例如 动画 和 分 层 等 。 在 可 视 编辑 回 中 进行 编辑 时 ， 可 以 同步 看 到 
Dreamweaver 生成 的 源 代码 。 

Dreamweaver 是 完全 可 定制 的 ， 用 户 可 以 创建 自己 的 对 象 和 命令 ， 修 改革 
单 和 快捷 键 ， 还 可 以 通过 书写 JavaScript 代码 为 Dreamweaver 创建 新 的 行为 和 
属性 面板 ， 以 增强 Dreamweaver 本 身 的 能 力 。 


s3309。 


HTML 网 页 设计 参考 手册 
由 于 Dreamweaver 的 功能 强大 ， 本 章 以 Dreamweaver MX 2004 为 例 ， 只 介绍 具有 代表 性 的 HTML 
元 素 在 Dreamweaver 中 的 添加 方式 。 
13.1 常用 页 面 元 素 


常用 页 面 元 素 主要 包括 在 页 面 中 导入 图 像 、 多 媒体 元 素 、 表 格 等。 
13.1.1 插入 图 像 


在 Dreamweaver 中 插入 图 像 不 需要 手工 编写 代码 ， 具 体 实现 步骤 如 下 : 
(1) 启动 Dreamweaver MX 2004。 


(2) 选择 “文件 ”| “新 建 ”命令 打开 “创建 文档 ”对 话 框 。 激 活 “ 常 规 ” 选 项 卡 ， 选 中 “基本 
页 ”列表 框 中 的 HTML， 如 图 13-1 所 示 。 单 击 “ 创 建 ” 按 钮 创建 一 个 新 的 HTML 页 面 。 


(3) 在 文档 窗口 中 选择 “ 拆 分 ”视图 的 显示 模式 ， 此 时 可 以 同时 显示 HTML 文件 的 代码 和 页 面 
设计 效果 ， 如 图 13-2 所 示 。 
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图 13-1 新 建 一 个 HTML 文档 


图 13-2 “ 拆 分 ”视图 显示 页 面 
(4) 选择 “文件 ” |“ 保存” 命令 ， 将 HTML 文件 保存 。 
(5) 为 了 便于 操作 和 演示 ， 此 处 将 文档 的 视图 设置 为 “设计 ”模式 。 选 择 “ 插 入 ”|“ 图 像 ” 命 令 
或 者 直接 单 击 “ 常 用 ”工具 栏 中 的 “插入 图 像 ”按钮 图 ， 打 开 “ 选 择 图 像 源 文件 ”对 话 框 ， 如 图 13-3 
所 示 。 


| 
Er 


13-3 “选择 图 像 源 文件 ”对 话 框 
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(6) 在 对 话 框 中 选择 要 插入 的 图 像 文 件 ， 单 击 “ 确 定 ”按钮 将 图 像 插 入 到 HTML 页 面 中 ， 效 果 
如 图 13-4 所 示 。 

(7) 在 页 面 中 的 “属性 ”面板 中 可 以 调整 图 像 的 各 种 属性 。 在 “ 宽 ” 和 “高 ”文本 框 中 可 以 设置 
图 像 的 大 小 ， 如 果 只 设置 其 中 的 一 个 值 ， 图 像 会 等 比例 缩放 ， 效 果 如 图 13-5 所 示 。 


[aN et| Fa er 


图 13-4 插入 图 像 文 件 图 13-5 ”调整 图 像 大 小 


(8) 此 外 ， 在 最 左 侧 的 “图 像 ”文本 框 中 可 以 为 图 像 命名 ; 在 “ 源 文件 ”文本 框 中 可 以 直接 调整 
图 像 文件 的 地 址 ， 在 “替代 ”文本 框 中 可 以 设置 图 像 的 提示 文字 ， 在 “链接 ”文本 框 中 可 以 设置 图 像 
的 链接 地 址 。 本 实例 中 设置 图 像 的 各 种 参数 如 图 13-6 所 示 。 
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图 13-6 调整 图 像 的 其 他 属性 


(9) 选择 “文件 ”|“ 保 存 ” 命 令 ,保存 HTML 文档 的 内 容 ， 在 Internet Explorer 中 打开 文件 ， 效 
果 如 图 13-7 所 示 。 单 击 页 面 中 的 图 像 ， 会 打开 一 个 新 的 链接 页 面 ， 效 果 如 图 13-8 所 示 。 
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图 13-7 使 用 Dreamweaver 插入 图 像 文 件 的 效果 图 13-8 打开 链接 页 面 
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13.1.2 导入 媒体 


媒体 导入 的 方法 与 图 像 的 导入 方法 类 似 ， 具 体操 作 步 又 如 下 : 

(1) 新 建 一 个 HTML 文件 并 保存 。 

(2) 选择 “插入 ”| “媒体 ”命令 或 单 击 “ 常 用 ”工具 栏 中 的 “媒体 ”按钮 曾 ， 在 其 下 拉 列 表 框 中 
选择 要 插入 的 媒体 类 型 ， 此 处 选择 “Flash 按钮 ”， 此 时 会 弹出 一 个 “插入 Flash 按钮 ”对 话 框 。 

(3) 在 对 话 框 中 可 以 设置 按钮 的 样式 、 按 钮 上 的 文字 内 容 、 文 字 字 体 、 按 钮 的 链接 地 址 等 ， 此 处 
设置 Flash 按钮 的 各 种 属性 如 图 13-9 所 示 。 

(4) 保存 并 运行 页 面 文档 ， 效 果 如 图 13-10 所 示 。 
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一. BE Eh] 图 
图 13-9 “插入 Flash 按钮 ”对 话 框 图 13-10 ”添加 Flash 按钮 的 效果 
(5) 添加 其 他 媒体 文件 的 方法 与 此 类 似 ， 此 处 不 再 重复 讲解 。 


13.1.3 ”添加 表格 


在 Dreamweaver 中 为 HTML 页 面 添加 表格 的 操作 步骤 如 下 : 

(1) 新 建 一 个 HTML 文件 并 保存 。 

(2) 选择 “插入 ”| “表格 ”命令 或 直接 单 击 “ 常 用 ”工具 栏 中 的 “插入 表格 ”按钮 图 ， 打 开 “ 表 
格 ” 对 话 框 。 

(3) 在 该 对 话 框 中 可 以 设置 表格 的 大 小 、 宽 度 、 边 框 属 性 、 边 距 属性 等 各 种 表格 参数 。 此 处 设置 
表格 的 各 种 属性 如 图 13-11 所 示 。 


13-11 设置 表格 的 各 种 属性 
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(4) 在 “属性 ”面板 中 可 以 对 表格 的 背景 、 边 框 颜 色 等 进行 调整 ， 如 图 13-12 所 示 。 
(5) 选中 表格 中 的 某 一 行 还 可 以 直接 调整 这 一 行 的 属性 ， 如 图 13-13 所 示 。 


x x le = AGE 
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13-12 ”调整 表格 的 属性 图 13-13 ”调整 一 行 表格 的 属性 
(6) 同样 的 方法 ， 如 果 选 中 其 中 某 一 个 单元 格 ， 可 以 对 该 单元 格 进行 单独 设置 ， 如 图 13-14 所 示 。 
(7) 在 表格 中 可 以 直接 添加 文本 内 容 ， 并 对 文本 字体 进行 调整 ， 如 图 13-15 所 示 。 
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图 13-14 设置 单元 格 属性 
(8) 完成 文字 的 添加 后 即 可 保存 文件 。 


13.1.4 添加 时 间 元 素 


图 13-15 在 表格 中 添加 文字 


Dreamweaver 还 提供 了 为 页 面 添加 时 间 元 素 的 功能 ， 添 加 方法 如 下 : 

(1) 新 建 一 个 HTML 文件 ， 为 该 文件 命名 并 保存 。 

(2) 选择 “插入 ”|“ 日 期 ”命令 或 直接 单 击 “ 日 期 ”按钮 阐 ， 打 开 “ 插 入 日 期 ”对 话 框 。 
(3) 在 对 话 框 中 可 以 设置 日 期 和 时 间 的 格式 ， 如 图 13-16 所 示 。 

(4) 保存 文件 修改 后 运行 程序 ， 可 以 看 到 页 面 上 显示 了 时 间 ， 效 果 如 图 13-17 所 示 。 
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图 13-16 ”设置 日 期 和 时 间 的 格式 13-17 运行 程序 的 效果 
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13.1.5 “设置 超级 链接 


在 Dreamweaver 中 添加 超级 链接 很 方便 ， 具 体操 作 步 又 如 下 : 

(1) 新 建 一 个 文件 ， 为 该 文件 命名 并 保存 。 

(2) 单 击 “ 常 用 ”工具 栏 中 的 “超级 链接 ”按钮 鲁 ， 打 开 “超级 链接 ”对 话 框 ， 如 图 13-18 
所 示 。 

(3) 在 对 话 框 中 可 以 设置 要 进行 链接 的 文本 、 链 接地 址 、 目 标 窗 口 的 打开 方式 等 ， 此 处 设置 效果 
如 图 13-19 所 示 。 
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Tab 键 索引 : 门 Tab 社 示 引 站 
图 13-18 “超级 链接 ”对 话 框 图 13-19 设置 超级 链接 
(4) 保存 文件 后 运行 程序 , 将 鼠标 移动 到 链接 文字 上 方 会 出 现 标题 文字 “设置 超级 链接 的 效果 ”， 


单 击 链接 文字 会 打开 链接 窗口 页 面 ， 效 果 如 图 13-20 所 示 。 
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图 13-20 ”添加 超级 链接 的 效果 


13.2 ”网 页 的 布局 


页 面 布 局 主要 是 通过 表格 、 框 架 和 层 来 实现 ， 在 Dreamweaver 中 可 以 轻松 实现 页 面 的 布局 。 
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13.2.1 使 用 布局 表格 


使 用 布局 表格 的 方法 如 下 : 
(1) 新 建 一 个 HTML 文件 ， 为 该 文件 命名 并 保存 。 
(2) 单 击 工具 栏 中 的 党 用 ,在 下 拉 列 表 中 选择 “布局 ”, 在 工具 栏 中 显示 布局 类 的 按钮 如 图 13-21 
所 示 。 
rr a 
图 13-21 “布局 ”工具 栏 
(3) 单 击 工具 栏 中 的 “布局 ”按钮 车 剧 ， 弹 出 如 图 13-22 所 示 的 提示 窗口 。 单 击 “ 确 定 ”按钮 进 


入 布局 模式 。 
(4) 单 击 “ 布 局 表格 ”按钮 知 ， 可 以 在 页 面 中 绘制 布局 表格 ， 默 认 情况 下 ， 布 局 表格 是 从 页 面 


的 左上 角 开 始 的 ， 如 图 13-23 所 示 。 


从 布局 模式 开始 | 


图 13-22 ”转换 为 布局 模式 的 提示 窗口 图 13-23 ”绘制 布局 表格 

(5) 单 击 工具 栏 中 的 “绘制 布局 单元 格 ”按钮 一 ， 在 布局 表格 中 可 以 绘制 单元 格 ， 如 图 13-24 所 示 。 

(6) 单 击 文档 窗口 中 的 “退出 ”按钮 ， 可 以 退出 布局 模式 ， 此 时 页 面 会 自动 将 刚才 创建 的 页 面 布 
局 保存 为 表格 的 形式 ， 效 果 如 图 13-25 所 示 。 


EE TE 
六 局 偿 岂 经 本 上 | 亲民 | 5 | 全 加 | 全 己 训 放 加- 局 | 


13-24 创建 布局 单元 格 13-25 ”退出 布局 模式 
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13.2.2 ”设置 框架 


框架 是 页 面 布 局 常见 的 一 种 方式 ， 在 Dreamweaver 中 也 可 以 很 容易 地 实现 ， 具 体操 作 步 又 如 下 : 

(1) 启动 Dreamweaver 后 选择 “文件 ”|“ 新 建 ” 命 令 ， 在 打开 的 “新 建文 档 ” 对 话 框 中 设置 框 
架 集结 构 ， 如 图 13-26 所 示 。 

(2) 选择 相应 的 框架 集结 构 后 ， 单 击 “ 创 建 ” 按 钮 可 以 创建 一 个 框架 页 面 。 选择 “文件 ”|“ 保 存 ” 
命令 可 以 保存 框架 集 页面 ， 此 时 框架 窗口 页 面 为 空白 页 。 

(3) 选中 框架 可 以 在 “属性 ”面板 中 设置 框架 的 边框 和 边框 颜色 等 ， 如 图 13-27 所 示 。 


ofrane pn 
We EEETIE 本 叭 各 和 @@|c 是 


RIt (Cs) 
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PERE 


这 本 四 用。 可 过 Ee CC) 有 rr 
ja 
Wes e ZF My 值 WD 。 单位 


行 反 sx 可 eg 
者 肌 MD | 首 思 梦 旭 了) 守 取 更 多 内容 一 职 测 亿 
图 13-26 ”创建 框架 页 面 图 13-27 设置 框架 的 边框 属性 
(4) 单 击 “ 布 局 ”工具 栏 中 的 “框架 ”按钮 加 上， 可 以 在 页 面 中 插入 新 的 框架 结构 。 
(5) 将 光标 移动 到 框架 的 边框 上 ， 拖 动 框架 边框 ， 可 以 调整 框架 的 布局 ， 如 图 13-28 所 示 。 
(6) 在 文档 窗口 中 按 住 Alt 键 ， 然 后 用 鼠标 单 击 一 个 框架 ， 选 中 该 框架 。 在 “属性 ”面板 中 可 以 
设置 该 框架 窗口 的 属性 ， 如 图 13-29 所 示 。 


i | 号 mm | 加 a a a 2 
图 13-28 调整 框架 图 13-29 设置 框架 窗口 的 属性 


(7) 如 果 要 完整 保存 框架 结构 ， 就 要 保存 框架 集 文件 和 所 有 的 框架 窗口 文件 。 
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13.2.3 ”使 用 层 进 行 布局 


层 是 Dreamweaver 中 有 代表 性 的 对 象 之 一 ， 在 制作 网 页 时 经 常用 到 ， 其 在 元 素 的 定位 方面 有 着 不 
可 替代 的 作用 和 无 可 比拟 的 优势 。 使 用 层 进行 布局 的 方法 如 下 : 

(1) 打开 一 个 HTML 文件 ， 如 图 13-30 所 示 。 

(2) 单 击 “ 布 局 ” 工具 栏 中 的 “描绘 层 ” 按钮 姥 ,， 拖 动 鼠标 左 键 在 页 面 中 绘制 一 个 层 , 如 图 13-31 


ron er MX 2004 【未 合 名 文 挡 (13/0gdivhtmj 
本 


有 有 局 园 回 每 | 和 |# 展 | 刘 局 | 站 渤 | 三 三 误区 四. 马 


| | |it| ml Fr | 


和’ 区 认 问 谤 一座 表 和 精 于 条 厂 桥 ， 信 河 而 包间 民 ; 
上 他 ps 


0 


加 |z| 二 | 要 | 要 | 时 | 居 接 避 


9|2| 至 | 生 | 于 | 加 | 居 报 中 
习 昌 | ocean || BW 


[一 3 ll 旧 标 名 ) 
图 13-30 打开 要 插入 层 的 页 面 图 13-31 插入 一 个 层 
(3) 在 层 内 可 以 直接 添加 内 容 ， 包 括 文 字 、 图 像 、 表 格 等 。 
(4) 选中 这 个 层 ， 在 “属性 ”面板 中 可 以 设置 层 的 位 置 、Z 轴 ( 即 层 合 顺序 ) 值 、 层 的 背景 等 ， 
此 处 设置 如 图 13-32 所 示 。 
(5) 如 果 为 一 个 页 面 添 加 多 个 层 ， 那 么 乙 轴 的 值 越 大 ， 显 示 就 越 靠 前 ， 如 图 13-33 所 示 。 
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i 5 男友 
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Er 可 上 四 | 志高 的 je 可 RW [er 可 有 8 旺 加 三 


图 13-32 设置 层 的 属性 图 13-33 ”多 个 层 的 重 又 效果 


(6) 选中 层 后 ， 将 鼠标 移动 到 层 的 边线 上 ， 光 标 变 为 趾 ， 此 时 可 以 拖 动 层 ， 调 整 其 位 置 。 如 果 光 
标 变 为 双 箭头 形状 ， 则 可 以 改变 层 的 大 小 。 
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13.3 表单 的 使 用 


使 用 Dreamweaver 可 以 在 页 面 中 随意 插入 各 种 表单 。 下 面 以 最 常用 的 几 种 表单 为 例 进行 详细 介绍 。 
13.3.1 插入 空白 表单 


(1) 新 建 一 个 HTML 文件 ， 为 文件 命名 后 保存 文件 。 
(2) 单 击 工具 栏 中 的 分 类 列表 ， 在 下 拉 列 表 中 选择 “表单 ”， 在 工具 栏 中 将 显示 表单 类 的 按钮 ， 
如 图 13-34 所 示 。 
表单 可 后 呈 国 | 梧 辐 站 | 画 园 | 大 古 吕 | 本] 
13-34 “表单 ”工具 栏 


(3) 如 果 要 添加 表单 元 素 ， 则 单 击 “ 表 单 ” 按 钮 国 即 可 在 页 面 中 创建 一 个 空白 表单 。 

(4) 此 时 在 “属性 ”面板 中 可 以 设置 表单 的 处 理 程序 、 提 交 方 式 等 。 其 中 ，“ 表 单 名 称 ” 下 方 的 
文本 框 用 于 设置 表单 名 称 ;， “动作 ” 则 是 设置 表单 的 处 理 程序 ， 可 以 单 击 文本 框 后 的 “选择 文件 ” 按 
钮 癌 选 择 处 理 程序 文件 ， 也 可 以 直接 在 文本 框 中 添加 处 理 程序 的 名 称 ， 如 “mailto:abcd@163.com”， 
如 图 13-35 所 示 。 

(5) 运行 程序 ， 可 以 看 到 由 于 表单 是 空白 的 ， 在 页 面 中 并 不 显示 出 来 ， 如 图 13-36 所 示 。 
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到 
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[三 [「 阿 天 8 
图 13-35 设置 表单 的 属性 图 13-36 插入 空白 表单 


13.3.2 ”插入 文本 类 控件 


在 Dreamweaver 中 插入 文本 字段 、 文 本 域 、 密 码 域 的 方法 比较 类 似 ， 这 里 一 起 介绍 。 插 入 该 类 型 
控件 的 方法 如 下 : 

(1) 新 建 一 个 HTML 文件 ， 为 文件 命名 并 保存 。 

(2) 单 击 “ 表 单 ”工具 栏 中 的 “文本 字段 控件 ”按钮 外， 在 页 面 中 插入 一 个 单行 的 文本 域 。 此 时 
在 “属性 ”面板 中 可 以 设置 表单 的 属性 ， 如 图 13-37 所 示 。 


第 13 章 在 Dreamweaver 中 创建 网 页 *339。 


(3) 单 击 选中 页 面 中 的 文本 框 ， 此 时 可 以 在 “属性 ”面板 中 设置 该 控件 的 名 称 、 字 符 宽度 〈 也 就 
是 文本 框 的 长 度 ) 、 最 多 字符 数 、 初 始 值 等 内 容 ， 如 图 13-38 所 示 。 


20u4 无 征文 档 (13yiofornERNERIE 


CT En 0 0 oe Wi 
hd 吕 | 后 疝 辐 | 同 现 画 | 要 加 | 盏 加 已 | 记忆 | hd el 


[区 FAKYV GP 三 攻 厅 用 下 草 四 


图 3 2 法 FE ~ ms 基 型 「 El Esss3 ET 
图 13-37 设置 表单 属性 图 13-38 插入 单行 文本 框 


(4) 单 击 “表单” 工具 栏 中 的 “文本 区 域 控件 ”按钮 国 ， 可 以 在 页 面 中 添加 一 个 多 行 的 文本 区 域 。 
选中 该 控件 后 也 可 以 在 “属性 ”面板 中 设置 其 各 项 参数 ， 如 图 13-39 所 示 。 由 图 中 可 以 看 出 ， 其 实 文 
本 区 域 控件 和 文本 字段 控件 可 以 实现 相同 的 功能 ， 只 是 默认 情况 下 文本 字段 为 单行 ， 文本 区 域 为 多 行 ， 
读者 可 以 根据 自己 的 喜好 来 选择 。 

(5) 添加 密码 域 的 方法 类 似 ， 一 般 情 况 下 密码 都 采用 单行 的 文本 框 。 用 前 面 介 绍 的 方法 添加 一 个 
文本 字段 后 ， 在 “属性 ”面板 中 选择 “密码 ”类 型 即 可 完成 密码 域 的 添加 。 运 行程 序 ， 可 以 看 到 添加 


的 文本 域 在 输入 内 容 时 只 显示 星 号 “*”， 如 图 13-40 所 示 。 
E x 6 加 
[CTJEICEIE ED ET 
+ 了 加 日 纯 | 以 雪 二 回收 二 天 各 妆 作 过 | 号 - 
ITRTTTRTPTTETTTYTT 可 eg 到 
FE 
Wi 习 
习 
机 做 Es | 个 PG) 个 多 行 利和 信友 QD PY 加 
hie EE 习 BE I 癌 条 加 
图 13-39 添加 多 行 的 文本 区 域 图 13-40 添加 文本 类 表单 的 效果 


13.3.3 插入 选择 区 域 


选择 区 域 主要 是 指 单 选 按钮 、 复 选 杠 。 插 入 选择 区 域 的 方法 如 下 : 

(1) 新 建 一 个 文件 ， 为 该 文件 命名 并 保存 。 

(2) 单 击 “ 表 单 ” 工具 栏 中 的 “ 复 选 框 ” 控件 按钮 加 ， 可 以 在 页 面 上 添加 带 有 一 个 复 选 框 的 表单 ， 
此 时 可 以 直接 在 “属性 ”面板 中 设置 表单 的 各 种 属性 。 

(3) 选中 复 选 框 ， 在 “属性 ”面板 中 可 以 设置 该 复 选 框 的 名 称 、 值 以 及 初始 状态 ， 如 图 13-41 
所 示 。 
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(4) 由 于 复 选 框 在 显示 时 不 能 显示 取 值 ， 因 此 一 般 在 网 页 上 都 要 添加 该 复 选 框 的 说 明文 字 ， 如 
图 13-42 所 示 。 
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图 13-41 设置 复 选 框 的 各 种 属性 图 13-42 ”添加 复 选 框 的 文字 说 明 
(5) 如 果 要 添加 单 选 按钮 ， 单 击 工具 栏 中 的 “ 单 选 按钮 ”控件 按钮 图 ， 此 时 在 页 面 上 添加 了 一 个 
单 选 按钮 。 选 中 该 单 选 按钮 可 以 在 “属性 ”面板 中 设置 该 单 选 按钮 的 各 种 属性 ， 如 图 13-43 所 示 。 需 
要 注意 的 是 ， 单 选 按钮 同样 需要 添加 文字 说 明 。 


《6) 用 同样 的 方法 添加 其 他 的 单 选 按钮 ， 值 得 注意 的 是 ， 一 个 组 中 的 单 选 按钮 要 取 相同 的 名 称 ， 
否则 会 出 现 如 图 13-44 所 示 的 状况 ， 此 时 就 不 能 称 为 真正 的 单 选 按钮 了 。 
和 


+ -小 -全 加 全 | 凤 扫 和 国 收 藉 严 漳 扒 体 加 | ” 
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选择 你 喜欢 的 水 果 : 
万 平 果 厂 桔子 三 香 茶 


你 的 性 别 ， @G 男 [全 | 女 


图 13-43 ”添加 单 选 按钮 


图 13-44 单 选 按钮 设置 了 不 同 的 名 称 效果 


(7) 添加 单 选 按钮 还 可 以 单 击 “ 表 单 ” 工 具 栏 中 的 “ 单 选 按钮 组 ”控件 按钮 图 ， 此 时 弹出 如 
图 13-45 所 示 的 对 话 框 。 
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13-45 “ 单 选 按钮 组 ”对 话 框 
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(8) 在 “名 称 ” 文 本 框 中 可 以 设置 该 单 选 按钮 组 〈 也 就 是 该 项 选择 ) 的 名 称 ， 单 击 “ 添 加 ”按钮 
到 可 以 在 选择 答案 中 增加 一 个 单 选 按钮 ， 单 击 “ 删 除 ”按钮 呈 癌 以 减少 一 个 单 选 按钮 。 单 击 单 选 按钮 
的 Label 属性 可 以 修改 单 选 按钮 在 页 面 上 显示 的 提示 文字 〈 即 选择 的 内 容 ) ; 单 击 单 选 按钮 的 Value 
属性 可 以 修改 单 选 按钮 提交 时 的 值 ， 如 图 13-46 所 示 。 

(9) 选择 一 个 单 选 按钮 的 选项 后 ， 单 击 对 话 框 中 的 “上 移 ” 按 钮 国 林 以 将 该 选项 的 位 置 提 前 ， 同 
样 ， 如 果 单 击 “ 下 移 ” 按 钮 国 阿 以 将 该 选项 的 位 置 向 下 移动 。 

(10) 完成 设置 后 单 击 “ 确 定 ” 按 钮 可 以 完成 单 选 按钮 组 的 添加 。 此 时 如 果 选 中 其 中 任何 一 个 单 
选 按钮 ， 会 发 现 它们 的 名 称 都 是 刚才 设 定 的 名 称 ， 如 图 13-47 所 示 。 
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而 局 ， 使 用 ; 人 执行 符 ( br> 标签》 
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Me 


图 13-46 ”设置 单 选 按 钮 组 图 13-47 查看 单 选 按钮 的 属性 


13.3.4 ”插入 菜单 和 列表 


列表 和 菜单 是 比较 节省 空间 的 选择 区 域 ， 在 Dreamweaver 中 的 添加 方法 如 下 : 

(1) 新 建 一 个 HTML 文件 ， 命 名 后 保存 该 文件 。 

(2) 单 击 “表单” 工具 栏 中 的 “列表 /菜单 ”控件 按钮 国 ， 在 页 面 上 添加 一 个 菜单 控件 。 选 中 该 
控件 可 以 在 “属性 ”面板 中 设置 菜单 的 名 称 ， 或 将 控件 设置 为 列表 。 

(3) 如 果 要 设置 菜单 的 选项 值 ， 可 以 单 击 “属性 ”面板 中 的 “列表 值 ”按钮 医 玉 过 十 j， 打 开 
“列表 值 ” 对 话 框 ， 如 图 13-48 所 示 。 

(4) 单 击 对 话 框 中 的 “添加 项 目 ”按钮 男 林 以 为 菜单 添加 一 个 选项 。 在 “项 目标 签 ”文本 框 中 设 
置 页 面 显示 的 文字 ,在 “ 值 ” 文 本 框 中 设置 提交 表单 的 值 ， 如 图 13-49 所 示 。 单 击 对 话 框 中 的 “上 移 ”、 
“下 移 ” 按钮 可 以 调整 选项 的 排列 顺序 。 完 成 后 单 击 “确定 ”按钮 完成 菜单 项 目的 添加 。 


图 13-48 “列表 值 ”对 话 框 13-49 ”添加 菜单 的 选项 
(5) 如 果 要 添加 列表 ， 则 选择 控件 后 在 “属性 ”面板 中 将 控件 类 型 更 改 为 “列表 ”， 此 时 可 以 设 
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置 列 表 的 高 度 〈 即 默认 显示 的 列表 项 ) 以 及 是 否 可 以 多 选 ， 如 图 13-50 所 示 。 
(6) 单 击 “列表 值 ”按钮 ， 在 打开 的 “列表 值 ”对 话 框 中 同样 可 以 添加 列表 的 各 选项 值 。 完 成 后 
保存 页 面 ， 运 行程 序 可 以 看 到 效果 如 图 13-51 所 示 。 
池 无 标题 文档 - Microsoft Internet Explorer 
」 文件 (E) ”编辑 (E) ”查看 (VW 收 说 多。 工具 (D 和 助 (H) 


+- - 国 罩 人 告 | 忆 基因 上 藉 天 二 强人 才 通 | ” 
[SETTTRTCTETETTT 可 PH 到 | 


添加 的 菜单 | 荣 单 项 目 1 到 
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图 二 一 下 CR 
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图 13-50 设置 列表 的 属性 图 13-51 添加 菜单 和 列表 的 效果 
13.3.5 ”添加 跳 转 菜单 


跳 转 菜单 是 一 种 比较 特殊 的 菜单 ， 它 通过 菜单 设置 页 面 的 链接 。 实 现 方法 如 下 ; 

(1) 创建 一 个 HTML 文件 ， 为 该 文件 命名 后 保存 。 

(2) 单 击 页 面 中 的 “ 跳 转 菜单” 控件 按钮 圆 ， 打 开 如 图 13-52 所 示 的 “插入 跳 转 菜单 ”对 话 框 。 

(3) 在 该 对 话 框 的 “菜单 项 ”中 可 以 显示 设置 的 菜单 项 目 ， 在 “文本 ”对 话 框 设置 菜单 项 的 显示 
内 容 ， 在 “选择 时 ， 转 到 URL“ 文 本 框 中 可 以 设置 跳 转 的 目标 页 面 。 单 击 “ 添 加 项 目 ”按钮 加 可 以 增 
加 新 的 菜单 项 ， 单 击 “ 删 除 ”按钮 到 可 以 删除 当前 的 菜单 项 。 在 对 话 框 的 下 半 部 分 可 以 设置 跳 转 菜单 
的 名 称 和 附加 选项 ， 如 图 13-53 所 示 。 
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mr Ed 局 可 局 | -到 -| 
EET a 本 i ew | 
XN wk MTT 
过 择 时 ,和 到 Ww 渍 迁 的 时 , 转 到 VIL: oomesem il 
打开 WL 于 : 压 B5H 习 mE 可 
节 间 多 Fen 0 7 
沈 项 ， 厂 ”来 单 之 后 插入 拘 企 按 柚 选项 : 厂 莱 单 之 后 插入 药 特 按钮 
厂 ”更 改 URL 后 渤 择 弟 一 个 项 目 厂 更 改 RL 后 选择 第 一 个 项 目 
图 13-52 “插入 跳 转 菜单 ”对 话 框 图 13-53 设置 跳 转 菜单 的 属性 
全 注意 : 添加 的 跳 转 菜单 项 在 运行 时 ,只 有 更 改 了 选项 才能 够 进行 成 功 跳 转 , 因此 最 好 加 上 一 个 没有 跳 
转 效 果 的 默认 选项 。 


(4) 设置 完成 后 ， 单 击 “ 确 定 ”按钮 在 页 面 中 实现 跳 转 菜单 的 添加 。 运 行程 序 可 以 看 到 如 图 13-54 
所 示 的 效果 。 选 择 菜 单 中 的 “ 跳 转 项 目 1”， 页 面 会 跳 转 到 设置 的 exam.html 文件 中 ,如 图 13-55 所 示 。 
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习 无 标题 文档 - Microsoft Internet E5BliEe 国王 口 后 | 


| | 四 bi 天 
| 地 让 (D) 舍 ] bookos Htmsourcetl3tl3iump hm 了 它 苇 到 


要 实例 页 面 - Microsoft Internet Explorer 
上 文件 加。 近 回 (E) 查看) 收工 具 (D ”| 
| -了 - 固 四 合同 过 国 居 ” 
地址 (0) [各] oiibook09 Htmsourcetl3texan himl 了 忆 转 到 


“343 。 


跳 转 荣 单 : 


目 ， 本 
2 
| 哑 转 项 目 3 


美丽 的 江南 小 镇 | 


EA 一 座 座 赚 加 | 精致 的 石 桥 ， 傍 河 
民居 ， 民 居 楼 板 底下 就 是 ; ke El 


图 13-54 ” 跳 转 菜单 的 效果 


提示 : 


13.3.6 ”添加 按钮 


图 13-55” 跳 转 后 的 页 面 


如 果 在 页 面 中 选中 该 菜单 ， 并 在 “属性 ”面板 中 将 其 类 型 更 改 为 “列表 ”， 那 么 最 后 实现 
的 就 是 跳 转 列 表 的 效果 。 


页 面 中 还 有 一 种 常见 的 表单 元 素 ， 即 按钮 。 按 钮 主要 分 为 提交 按钮 、 重 置 按钮 和 普通 按钮 ， 而 这 3 


种 按钮 的 添加 方法 基本 相 
(1) 新 建 一 个 文件 ， 


可 


为 该 文件 命名 后 保存 。 


(2) 单 击 “ 表 单 ” 工 具 栏 中 的 “按钮 ”控件 回 ， 可 以 在 页 面 中 添加 一 个 按钮 。 默 认 情况 下 同时 
添加 一 个 表单 ， 此 时 可 以 在 “属性 ”面板 中 设置 表单 的 各 项 属性 。 


(3) 选中 该 按钮， 


可 以 在 “属性 ”面板 中 设置 按钮 控件 的 名 称 、 标 签 ( 即 按钮 上 的 文字 ) 、 动 作 
〈 即 按钮 类 型 ) 等 。 动 作 主要 包括 “提交 表单 ”提交 按钮 ) 、 


“无 ” (普通 按钮 ) 和 “ 重 设 表单 ” 


〈 重 置 按钮 ) ， 如 图 13-56 所 示 。 


标签 轨 本 均 动作 6 提交 表单 名 个 无 如 
个 重 设 表单 @) 


13-56 ”按钮 控件 的 各 项 参数 
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13.4 添加 各 种 类 型 的 文本 


在 Dreamweaver 中 可 以 添加 各 种 类 型 的 文字 ， 包 括 标题 文字 、 列 表 项 、 粗 体 文字 等 。 添 加 文本 的 
方法 如 下 : 
(1) 新 建 一 个 HTML 文件 ， 为 文件 命名 后 保存 文件 。 


(2) 单 击 页 面 上 工具 栏 的 分 类 列表 ， 在 下 拉 列 表 中 选择 “文本 ”， 在 工具 栏 中 将 显示 文本 类 的 按 
钮 ， 如 图 13-57 所 示 。 


wv RBI|S en tm|h hh3| ul ol |d dt dd |ar wsc 
图 13-57 “文本 ”工具 栏 


(3) 选择 相应 类 型 的 文本 按钮 (如 hl ) ， 在 页 面 中 输入 该 类 型 的 文本 内 容 。 双 击 选中 文本 内 容 后 
在 “属性 ”面板 中 可 以 设置 该 类 文字 的 样式 ， 包 括 字体 、 字 号 、 颜 色 等 ， 如 图 13-58 所 示 。 

(4) 完成 后 按 下 Ctrl+Enter 组 合 键 即 可 跳出 该 类 文本 ， 再 按 Enter 键 则 进入 到 下 一 段落 的 文本 编 
辑 中 。 如 果 要 添加 其 他 类 型 的 文本 ， 只 需 在 单 击 相应 的 文本 类 型 后 输入 文字 即 可 。 

(5) 此 实例 中 添加 标题 文本 、 编 号 列表 、 段 落 文字 ,并 设置 不 同 的 文本 样式 ， 效 果 如 图 13-59 所 示 。 


TFT ET 
TT EE st ho He Ri 
Ed MBI)SemlT im | 


管 时 EF 科大 天 避 司 站 
标 是 文字 h1 的 效 届 旋 题 文字 h1 风 效果 


基 编号 列表 文 宇 效果 
第 二 个 编号 列表 项 


餐 容 攻关 隐 重 具 。 可 以 癌 轩 入 风 页 中 如 扶 要 站 区 实 背 襟 二 的 
#5 人 克 开展 间作 好 的 闻 万 ， 必 洗 此 是 水 克 玉 妃 滤 办 加 


二 \ 老 一 厂区 关 后 ， 套 下 回 于 继 后 务 生 碟 了 一 个 克 闻 ， 
区 olstvieT 4 EE 加 | 
Ct ee he 和 EY BE 0] 网 
图 13-58 添加 hl 类 型 的 文本 图 13-59 在 Dreamweaver 中 添加 各 种 类 型 的 文本 


13.5 ”添加 HTML 网 页 的 辅助 内 容 


HTML 网 页 的 辅助 内 容 主要 指 水 平 线 、 文 件 头 、 设 置 脚本 属性 等 。 
13.5.1 添加 水 平 线 


在 HTML 页 面 中 添加 水 平 线 的 具体 步骤 如 下 : 
(1) 新 建 一 个 文件 ， 在 页 面 中 添加 部 分 内 容 后 保存 ， 如 图 13-60 所 示 。 
(2) 将 光标 移动 到 要 添加 水 平 线 的 位 置 ， 选 择 “插入 ”|IHTML| “水平线 ”命令 ， 或 者 在 工具 栏 中 
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显示 的 HTML 类 中 单 击 “ 水 平 线 ”按钮 双 。 此 时 在 页 面 中 添加 了 一 条 默认 属性 的 水 平 线 ， 且 水 平 线 处 
于 选中 状态 。 
(3) 在 “属性 ”面板 中 可 以 更 改 水 平 线 的 大 小 、 对 齐 方式 等 ， 此 处 设置 的 效果 如 图 13-61 所 示 。 


[| 
"Os: 网 I | 国史” 
J TI 可 PH 可 


习 


江南 小 镇 


slz| 要 | 要 | 到 | 至 | 3 PF 
加 二 | 宇 当 3 图 盖 Ra 


图 13-60 ”添加 文件 的 内 容 图 13-61 在 页 面 中 添加 水 平 线 
13.5.2 ”设置 文件 元 信息 


文件 的 元 信息 主要 是 用 来 定义 页 面 信息 的 名 称 、 关 键 字 、 作 者 等 内 容 ， 并 不 显示 在 页 面 中 。 在 
Dreamweaver 中 添加 元 信息 的 方法 快捷 简单 。 

(1) 新 建 一 个 文件 ， 将 该 文件 命名 为 1 2meta.htm 并 保存 文件 。 

(2) 选择 “插入 ”|IHTML|“ 文 件 头 标签 ”|META 命令 ， 打 开 如 图 13-62 所 示 的 对 话 框 。 

(3) 在 该 对 话 框 中 的 “属性 ”下 拉 列 表 框 中 可 以 设置 Meta 属性 类 型 ， 在 “ 值 ”文本 框 中 设置 具 
体 的 属性 名 , 在 “内 容 ” 文 本 框 中 则 是 具体 属性 的 取 值 ， 如 图 13-63 所 示 。 此 处 设置 了 作者 名 称 为 “ 张 
王 李 赵 ”。 


yy 
必 性 [2 从 可 丰产 i 


内 容 : 下 


图 13-62 META 对 话 框 图 13-63 设置 META 属性 


(4) 完成 后 单 击 “ 确 定 ”按钮 则 可 以 完成 该 属性 的 设置 。 

(5) 如 果 要 设置 页 面 的 关键 字 ， 可 以 选择 “插入 ”|IHTMLI“ 文 件 头 标签 ”|“ 关 键 字 ” 命 令 ， 在 
弹出 的 “关键 字 ” 对 话 框 中 设置 页 面 的 关键 字 ， 各 个 关键 字 之 间 用 英文 逗号 “,” 隔 开 ， 如 图 13-64 所 
示 。 完 成 后 单 击 “ 确 定 ”按钮 在 页 面 中 添加 该 属性 的 设置 。 

(6) 选择 “插入 ”|IHTMLI“ 文 件 头 标签 ”|“ 刷 新 ”命令 ， 在 弹出 的 “刷新 ”对 话 框 中 设置 页 面 
的 刷新 或 跳 转 时 间 。 如 果 设置 刷新 ， 则 在 “操作 ” 单 选 按钮 组 中 选中 “刷新 此 文档 ”; 如 果 要 设置 跳 
转 ， 则 选中 “ 转 到 URL” 单 选 按钮 并 在 后 面 的 文本 框 中 设置 要 跳 转 的 页 面 ， 如 图 13-65 所 示 ， 设 置 了 
页 面 在 3 秒 之 后 跳 转 到 exam.html 文件 窗口 。 
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EE33 [a EE: 
关机 本。 Ep 
人 ,元 言 页- 天 是 村 i 取消 
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图 13-64 设置 页 面 关键 字 图 13-65 设置 页 面 跳 转 


(7) 在 页 面 中 添加 其 他 元 信息 的 方法 与 此 类 似 ， 这 里 就 不 再 重复 说 明 ， 读 者 可 以 通过 练习 逐渐 


13.5.3 ”添加 脚本 


使 用 Dreamweaver 在 页 面 中 添加 脚本 语言 代码 的 方法 如 下 : 
(1) 打开 一 个 HTML 文件 。 
(2) 选择 “插入 ”IHTMLI“ 脚 本 对 象 ” |“ 脚本 ”命令 ， 可 以 打开 “脚本 ”对 话 框 。 在 对 话 框 的 
“语言 ”下 拉 列 表 框 中 可 以 设置 脚本 语言 ， 如 图 13-66 所 示 。 
(3) 在 “内 容 ” 文 本 域 中 直接 添加 脚本 程序 。 此 处 添加 脚本 程序 如 下 : 
alert(" 使 用 脚本 语言 弹出 一 个 窗口 "); 
(4) 单 击 “ 确 定 ” 按 钮 ， 出 现 如 图 13-67 所 示 的 提示 窗口 。 
(5) 单 击 “ 确 定 ” 按 钮 完成 脚本 的 添加 。 如 果 和 希望 不 再 显示 这 个 信息 ， 选 中 窗口 中 的 复 选 框 即 
可 。 运 行程 序 的 效果 如 图 13-68 所 示 。 


jgjz 
| THD WMD 5 SMD TAD PEG) 
J ere -+- 人 OB 
Dreamweaver MX 2004 划 
全 TT 
厂 不 再 显示 这 个 信息。 
图 13-66 设置 脚本 语言 图 13-67 不 可 见 元 素 提 示 窗 口 ”图 13-68 添加 脚本 后 的 运行 效果 


在 Dreamweaver 中 还 提供 了 其 他 一 些 功能 ， 读 者 在 学 习 完 本 书 之 后 可 以 参考 有 关 Dreamweaver 的 
书籍 加 以 了 解 ， 从 而 创建 更 美观 、 功 能 更 完善 的 网 页 程序 。 


附录 “颜色 关键 字 对 照 表 


颜色 名 称 十 六 进 制 RGB 十 进 制 RGB 
aliceblue #f0 人 e 任 240,248.255 
antiquewhite #faebd7 250,235,215 
agua #0OfEE 0,255,255 
aquamarine #7fffd4 yy 2 
azure #fOfpfF 240,255,255 
beige #f5f5de 245,245,220 
bisque #ffe4c4 255,228,196 
black, 时 #000000, 0.0.0 
blanchedalmond #ffebcd 255,235,205 
blue IL #0000ff 0.0.255 
blueviolet #8a2be2 138,43,226 
brown #a52a2a 165.42.42 
burlywood #deb887 222,184,135 
cadetblue #5f9ea0 95.158,160 
chartreuse #7ffF00 127,255,0 
chocolate #d2691e 210,105.30 
coral #7f50 255,127,80 
cornflowerblue #6495ed 100,149,237 
cornsilk #fffgdc 255,248,220 
crimson #dc143¢c 220,20,60 
cyan #00fFf 0,255,255 
darkblue #00008b, 0.0.139 
darkcyan #008b8b 0,139,139 
darkgoldenrod #b8860b 184,134,11 
darkgray #a9a9a9 169,169.,169 
darkereen #006400 0.100.0 
darkkhaki #bdb76b 189.,183,107 
darkmagenta #8b008b 139,0,139 
darkolivegreen #556b2f 85.107.47 
darkorange #ff8c00 255.140.0 
darkorchid #9932cc 153,50,204 
darkred #8b0000 139.0,0 
darksalmon #e9967a 233,150,122 
darkseagreen #8fbc8f 143,188,143 
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续 表 
颜色 名 称 十 六 进 制 RGB 十 进 制 RGB 
darkslateblue #483d8b 72.61.139 
darkslategre' #2f4f4f 47.79.79 
darkturquoise #00cedl 0,206,209 
darkviolet #9400d3 148,0,211 
deeppink #ff1493 255,20,147 
deepskyblue #00bfff 0,191,255 
dimgray #696969 105,105,105 
dodgerblue #1e90f 30,144,255 
firebrick #b22222 178,34,34 
floralwhite #fffafd 255,250,240 
forestgreen #228b22 34,139,34 
fuchsia #f100 信 255,0,255 
gainsboro #dcdcdc 220,220,220 
ghostwhite #f8f8 位 248,248,255 
gold #ffd700 255,215,0 
goldenrod #daa520 218,165,32 
Bra #808080. 128,128,128 
green #008000 0.128.0 
greenyellow #adff2f 173,255,47 
honeydew #f0fff0 240.255.240 
hotpink #ff69b4 255,105.,180 
indianred #cd5c5e 205,92,92 
indigo #4b0082 75.0.130 
ivory #fffff0 255,255,240 
khaki #f0e68c 240,230,140 
lavender #e6e6fa 230,230,250 
lavenderblush #ff0f5 255,240,245 
lawngreen #7cfc00 124,252,0 
lemonchiffon #fffacd 255,250,205, 
lightblue #add8e6 173,216.230 
lightcoral #f08080 240,128,128 
lightcyan #eOfFFF 224,255,255 
lightgoldenrodyellow #fafad2 250,250,210 
lightgra #d3d3d3 211,211211 
lightgreen #90ee90 144,238,144 
lightpink #ffb6cl 255,182,193 
lightsalmon #ffa07a 255,160,122 
lightseagreen #20b2aa 32.178,170 
lightskyblue #87cefa 135,206,250 
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续 表 

颜色 名 称 十 六 进 制 RGB 十 进 制 RGB 
lightslategray #778899 119,136,153 
lightsteelblue #b0c4de 176,196,222 
lightyellow #ffffe0 255,255,224 
lime #00ff00 0,255,0 
limegreen #32cd32 50,205,50 
linen #fafVe6 250,240,230 
magenta #ff00 信 255,0,255 
maroon #800000 128.0.0 
mediumaquamarine 中 绿色 #66cdaa 102.205,170 
mediumblue 中 蓝 色 #0000cd 0.0.205 
mediumorchid 中 粉 紫色 #ba55d3 186.85.211 
mediumpurple 中 紫色 #9370db 147,112,219 
mediumseagreen 中 海蓝 #3cb371 60,179,113 
mediumslateblue #7b68ee 123,104,238 
mediumspringgreen #00fa9a 0,.250,154 
mediumturquoise #48dlcce 72,209,204 
mediumvioletred #c71585 199,21,133 
midnightblue #191970 25.25,112 
mintcream #f5fffa 245,255,250 
mistyrose #ffe4el 255,228,225 
moccasin #ffe4b5 255,228.181 
navajowhite #ffdead 2 222 7 
nav #000080 0.0.128 
oldlace #fdf5e6 253,245.230 
olive #808000 128,128,0 
olivedrab #6b8e23 107,142,35 
orange #ffa500 255.165.0 
orangered #ff4500 255,69,0 
orchid #da70d6 218,112,214 
palegoldenrod #eee8aa 238,232,170 
palegreen #98fb98 152,251,152 
paleturquoise #afeeee 175,238,238 
palevioletred #db7093 219,112,147 
papayawhip #ffefd5 255,239,213 
peachpu 人 ff #ffdab9 255,218,185 
peru #cd853f 205,133,63 
pink #ffcOcb 255,192,203 
plum #dda0dd 221,160,221 
powderblue #b0e0e6 176,224,230 
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续 表 

颜色 名 称 十 六 进 制 RGB 十 进 制 RGB 
purple #800080 128,0,128 
red #ff0000 255.0.0 
Tosybrown #bc8f8f 188,143,143 
royalblue #4169el 65,105,225 
saddlebrown #8b4513 139,69,19 
salmon #fa8072 250,128.114 
sandybrown #f4a460 244.164.96 
Seagreen #2e8b57 46.139,87 
Seashell #fffsee 255,245,238 
sienna #a0522d 160,82,45 
silver #c0c0c0 192,192,192 
skyblue #87ceeb 135,206,235 
slateblue #6a5acd 106,90,205 
slategra, #708090 112,128,144 
Snow, #fffafa 255,250,250 
springgreen #00fF7f 0.255,127 
steelblue #4682b4 70,130,180 
tan #d2b48c 210,180,140 
teal #008080 0.128,128 
thistle #d8bfd8 216.191.216, 
tomato #ff6347 255,99,71 
turquoise #40e0d0 64,224,208 
violet #ee82ee 238,130,238 
wheat #f5deb3 245,222.179 
white #fFFFF 255,255,255 
whitesmoke #f5f5f5 245,245,245 
yellow #ffff00 255,255,0 
ellowereen #9acd32 154,205,50 


您 购买 的 书 名 : 您 的 姓名 : 性 别 : 口 男 口 女 
年 龄 : 文化 程度 : 职 业 : 
邮编 通信 地 址 : E-mail: 
您 常用 的 软件 : 1 2 3 4 


您 购买 本 书 的 原因 (可 多 选 ): 
口 封面 与 装帧 口 引言 目录 口 正 文 内 容 口 从 书 风格 口 价格 ” 口 光盘 口 专 业 性 强 口 别人 介绍 
口 出 版 社 或 作者 名 声 口 售 后 服务 


本 书 最 令 您 满意 的 是 (可 多 选 ): 


口 专业 性 强 、 覆 盖 面 广 内 容 翔实 、 定 位 准确 ” 口 精益 求 精 、 售 后 服务 
您 可 以 承受 的 图 书 价格 : 
20 元 以 下 30 元 以 下 40 元 以 下 50 元 以 下 口 只 要 内 容 好 ， 不 论 价 格 
您 对 本 书 的 评价 : 
封面 装帧 ， 口 很 好 较 好 一 般 不 满意 建议 
印刷 质量 : 口 很 好 较 好 - 般 不 满意 建议 
正文 质量 : 口 很 好 较 好 - 般 不 满意 建议 
写作 风格 : 口 很 好 较 好 - 般 不 满意 建议 
专业 水 平 : 口 很 好 较 好 - 般 不 满意 建议 
您 希望 增加 哪些 图 书 选 题 : 1 了 3 
您 认为 本 书 有 哪些 错误 : 
章节 页 码 行 列  _ 图 号 错误 应 改 为 
章 节 页 码 行 列 图 号 错误 应 改 为 
章 节 页 码 行 列 图 号 错误 应 改 为 
章 节 页 码 行 列 图 号 错误 应 改 为 
您 的 其 他 建议 : 
1 
到 
3 
请 填 好 本 卡 后 寡 给 : 
清华 大 学 校内 金地 公司 邮编 ，100084 电话 : (010) 62791976-220 
《HTML 网 页 设计 参考 手册 》 编 辑 部 收 
传真 : (010) 62788903 公司 网 址 ，www.thjd.com.cn E-mail: oyzx_sp@263.net 


如 需 本 书 可 与 本 编辑 部 联系 邮购 ， 汇 款 请 按 以 上 地 址 填写 ， 另 加 邮费 15% (挂号 ) 


